从具有过渡动画的 ng-repeat 中删除项目

Question

我在 ng-repeat 中有一组项目。此父元素还有一个持续时间为 1 秒的背景过渡动画。

每当我使用 splice 删除元素时，从 UI 中删除元素需要 1 秒。（根据我给过渡期的时间）

我不想再添加一个class先去掉过渡，再删除。或者这是唯一的方法吗？

<div class="MyTransitionClass" ng-repeat="d in myArray">     
    {{d.Value}}
    <button type="button" class="CloseIcon" ng-click="DeleteItem($index)">DELETE</button>
</div>

.MyTransitionClass {
    transition: background-color ease-in 1s;
    -webkit-transition: background-color ease-in 1s;
}

Answer 1

这样试试https://docs.angularjs.org/api/ngAnimate

.MyTransitionClass.ng-enter {
    transition: background-color ease-in 1s;
    -webkit-transition: background-color ease-in 1s;
}

工作jsfiddlehttp://jsfiddle.net/irhabi/3fgtqwgq/

从具有过渡动画的 ng-repeat 中删除项目

Delete item from ng-repeat which has a transition animation

transition

angularjs

angularjs-ng-repeat