Angular 1.2：使用 ngAnimate 和 CSS 并行动画列表项

Question

我有一个列表，当我将一个项目添加到此列表时，我希望将其动画化，并且当前可见的任何现有项目也应该并行动画化 - 想想从上到下的垂直传送带。

除了添加新项目时可见项目卡入到位之外，我几乎可以正常工作。这是一个 sn-p if 代码：

<div class="outerContainer">
   <div class="container" ng-repeat="item in items">
    .....
   </div>
</div>

.outerContainer {
  height: 200px;
  overflow: hidden;
}

.container {
    position: relative;
    background-color: lightgray;
    margin: 1px;
    width: 200px;
    height: 50px;
}

.container.ng-enter {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
}
.container.ng-enter {
    top:-50px;
}
.container.ng-enter.ng-enter-active {
    top:0;
}

任何有用的指针将不胜感激。

Answer 1

我相信你的转换在错误的位置有转换属性，它应该是这样的

.container.ng-enter {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}