javascript - AngularJS ng-show动画在ng-repeat中交叉淡入淡出

Question

简单(但不适合我!)angularjs 显示/隐藏动画问题。

我到处搜索，但没有找到解决这个特定问题的方法，也许最好用一个例子和一个“挑战”来解释这个问题。

先举个例子:http://jsfiddle.net/adammontanaro/QErPe/1/

挑战:任何人都可以让这些图像淡入和淡出重叠，而不是出现在当前显示的图像下方或上方 , 然后在上图的 div 被隐藏后弹出到位？

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:

.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;
}

几个小时以来，我一直在努力解决这个问题。我看过很多好帖子，展示了如何使单个图像或 div 出现或消失，但当我尝试简单的交叉淡入淡出和替换时，一切都崩溃了。我试过弄乱绝对/相对定位，但无济于事。

尝试使用开关进行此操作，但无法在开关条件下使用 $index，因此我可以在运行时加载我的图像。这是一个很大的要求。

仅供引用 - 这是使用 angular 1.1.5

谢谢!!!亚当

Answer 1

您实际上完全正确!您只是缺少一点 CSS。

我用正确的东西(一些相对位置和绝对位置以及一小撮高度)修复了你的 jsfiddle，它就像一个魅力。

大部分新内容是:

.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;
}

根据需要在 HTML 中应用类。

查看:http://jsfiddle.net/QErPe/2/

希望对您有所帮助!