AngularJS ng-在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,因此我可以在运行时加载我的图像.这是一个很重要的要求.

仅供参考 - 这是使用角度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/

希望有所帮助!