小编Ada*_*aro的帖子

简单(但不适合我!)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

谢谢!!!亚当