ng-repeat上的Angularjs动画

Question

我有一个ng-repeat设置并使用过滤。当我应用过滤器时，我想简单地淡出所有当前显示的元素，然后在过滤后的集合中淡出。我见过的所有演示都会消失掉过滤掉的元素中同时被滤除的元素。我最好看一个使用JS动画的演示。

Answer 1

HTML：

 <li class="page-list-item" ng-repeat="item in items">
        <span>{{ item }}</span>
    </li>

CSS：

.page-list-item.ng-enter {
    -webkit-transition:0.2s linear all;
    -moz-transition:0.2s linear all;
    -ms-transition:0.2s linear all;
    -o-transition:0.2s linear all;
    transition:0.2s linear all;

    -ms-opacity: 0;
    opacity: 0;
}


.page-list-item.ng-enter.ng-enter-active {
    -ms-opacity: 1;
    opacity: 1;
}

.page-list-item.ng-leave {
    -webkit-transition:0.2s linear all;
    -moz-transition:0.2s linear all;
    -ms-transition:0.2s linear all;
    -o-transition:0.2s linear all;
    transition:0.2s linear all;

    -ms-opacity: 1;
    opacity: 1;
}

.page-list-item.ng-leave.ng-leave-active {
    -ms-opacity: 0;
    opacity: 0;
}

我希望它有所帮助！