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/

希望有所帮助！

Answer 2

这看起来实际上是一个CSS问题而不是角度问题。您需要将两个div放在彼此的顶部，并确保它们实际上同时占用相同的空间。之后，交叉褪色应该是小菜一碟。

Answer 3

你也可以在.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;
}

现在，当添加ng-hide类时，它会淡化图像的不透明度。 ngAnimate有它的位置，但在.ng-hide类中使用简单的CSS3，你可以消除挫折感。

AngularJS ng-在ng-repeat中显示动画交叉淡入淡出

3 个答案: