首页 > 代码库 > AngularJS Animation是如何运作的？

AngularJS Animation是如何运作的？

2024-07-15 21:34:15   222人阅读

当Angular往repeat list里面加入一个元素的时候，.ng-enter 和 .ng-enter CSS 类会被自动赋予给该元素。以下是enter:新增、leave:移除、move:移动位置 这三种不同的情况下，该元素的类变化情况：

事件 初始类 终结类 触发该CSS类变化的指令
enter .ng-enter .ng-enter-active ngRepeat, ngInclude, ngIf, ngView
leave .ng-leave .ng-leave-active ngRepeat, ngInclude, ngIf, ngView
move .ng-move .ng-move-active ngRepeat

In addition, ngAnimate also supports CSS-based animations which follow a similar naming convention. Here‘s a breakdown of that:

事件 起始类 结束类 触发该CSS类变化的指令
hide an element .ng-hide-add .ng-hide-add-active ngShow, ngHide
show an element .ng-hide-remove .ng-hide-remove-active ngShow, ngHide
adding a class to an element .CLASS-add .CLASS-add-active ngClass and class="{{expression}}"
removing a class from an element .CLASS-remove .CLASS-remove-active ngClass and class="{{expression}}"


联系
我们