CSS AngularJS ng-show 动画在 ng-repeat 中淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18994458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-show animation cross-fade inside ng-repeat
提问by Adam Montanaro
Simple (but not for me!) angularjs show/hide animation problem.
简单（但不适合我！）angularjs 显示/隐藏动画问题。
I have searched high and low but not found the solution to this specificproblem, which can perhaps be best explained with an example and a "challenge".
我已经搜索了很多，但没有找到这个特定问题的解决方案，这也许可以用一个例子和一个“挑战”来最好地解释。
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
一、例子：http: //jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out overeach other, rather than appearing belowor abovethe currently shown image, then popping into place once the upper image's div is hidden?
挑战：任何人都可以做这些图像淡入淡出过对方，而不是出现以下或以上的当前显示的图像，然后弹出到地方一旦上图像的DIV隐藏？
The HTML:
HTML：
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
CSS：
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
我已经在这上面转动了几个小时。我已经看到大量优秀的帖子展示了如何使单个图像或 div 出现或消失，但是当我尝试简单的交叉淡入淡出和替换时，这一切都失败了。我试过搞乱绝对/相对定位，但无济于事。
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
用开关试过这个，但不能在开关条件下使用 $index，所以我可以在运行时加载我的图像。这是一个很大的要求。
FYI - this is using angular 1.1.5
仅供参考 - 这是使用 angular 1.1.5
Thank you!!! Adam
谢谢！！！亚当
采纳答案by betaorbust
You actually have it all correct! You're just missing a little CSS.
你实际上一切都正确！你只是缺少一点 CSS。
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
我用正确的东西（一点相对位置和绝对位置以及一点高度）修复了你的 jsfiddle，它就像一个魅力。
The bulk of the new stuff is:
大部分新东西是：
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
根据需要在 HTML 中应用类。
Check it out: http://jsfiddle.net/QErPe/2/
检查一下：http: //jsfiddle.net/QErPe/2/
Hope that helps!
希望有帮助！
回答by WebDevJ
You can also do plain CSS3 on the .ng-hide class. For example:
你也可以在 .ng-hide 类上做普通的 CSS3。例如：
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.
所以现在，当添加 ng-hide 类时，它会淡化图像的不透明度。ngAnimate 有它的位置，但是使用 .ng-hide 类上的简单 CSS3，您可以消除挫折。
回答by Fourth
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
这实际上更像是一个 CSS 问题，而不是一个角度问题。您需要将两个 div 放在彼此的顶部，并确保它们实际上同时占据相同的空间。之后，交叉淡化应该是小菜一碟。
