Question

Angular的animate-repeat并没有应用ng-move类，所以我很困惑，无法创建我想要的动画。

我正在使用ng-repeat和自定义过滤器来添加和删除水平行中的div：

 <div id="presidents">
   <div ng-repeat="president in presidents | showPresident:this" class="pres animate-repeat" id="{{ president.birth }}" >
     <a href="{{ president.url }}" target="_blank">
       <img src="{{ president.imageURL }}" alt="{{ president.name }}">
     </a>
     <p>{{ president.name }}</p>
   </div>
 </div>

我正在尝试为div添加和删除div时创建动画。 ng-repeat state的Angular文档中有三类可用于此类动画：ng-enter，ng-leave和ng-move。我已经将CSS动画应用于进入和离开类，以便div淡入和淡出。

.ng-enter {
  animation: zoomIn 1s;
}

.ng-leave {
  animation: zoomOut 1s;
}

当div淡入或淡出时，其他人必须滑入或滑出其中，似乎应该应用ng-move类，以便我可以为该过程设置动画，但是永远不会应用，所以div只是突然而不是按照我想要的方式滑动。我通过给它一个红色边框验证了该类永远不会被应用：

.ng-move {
  border: 4px solid red;
}

那么，我是否误解了ng-move？为什么它们在重新定位时不会应用于剩余的div？

如何让这些div滑过而不是捕捉？

Answer 1

我最终使用的解决方案是自己动画元素的宽度和不透明度，而不是使用animate.css。当它们缩小尺寸时，其他的滑动到位。使用文本看起来很奇怪，但对图像效果很好。不需要ng-move类。

Angular 1.2 - ngAnimate不适用.ng-move类

1 个答案: