11

简单（但不适合我！）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

谢谢！！！亚当

4

3 回答 3

7

实际上，您完全正确！你只是缺少一点 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/

希望有帮助！

于 2013-09-25T05:03:56.237 回答
0

你也可以在 .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，你可以消除挫败感。

于 2015-02-10T23:52:53.317 回答
0

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

于 2013-09-25T00:58:32.273 回答