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

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

1 个答案: