Angular 1.2:使用ngAnimate和CSS并行设置列表项的动画

Question

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

除了添加新项目时可查看的项目外，我几乎所有的东西都能正常工作。以下是代码片段：

<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;
}