使用 CSS 过渡动画ng-class
添加或删除有 3 个阶段。这些阶段的顺序非常重要,我几乎花了一天时间弄清楚为什么一个简单的动画无法正常工作,原因是对添加类的顺序有错误的理解。
阶段1:
classname-add
/classname-remove
类被添加。
与某人可能认为的不同,这实际上是在将类添加到元素中/从元素中删除之前添加的。
这是我们应该添加transition
属性1以及动画的初始状态的阶段。
第 2 阶段:
classname
类被添加或删除。
您可以在此处指定元素的最终样式。这个类通常与我们的动画无关。请记住,我们正在为此类的添加/删除设置动画。这个类本身甚至不需要知道它周围有一个动画。
第三阶段:
classname-add-active
/classname-remove-active
类被添加。
这是在将类添加到元素/从元素中删除之后添加的。
这是我们应该指定动画最终状态的阶段。
为了看到这一点,让我们创建一个经典的淡入淡出动画,当元素的选定状态发生变化时显示(selected
使用 ng-class 更改类)。
angular.module('demo', ['ngAnimate'])
.controller('demoCtrl', function($scope) {
$scope.selected = false;
$scope.selectToggle = function() {
$scope.selected = !$scope.selected;
};
});
.item {
width: 50px;
height: 50px;
background: grey;
}
.item.selected {
/* this is the actual change to the elment
* which has nothing to do with the animation
*/
background-color: dodgerblue;
}
.item.selected-add,
.item.selected-remove {
/* Here we specify the transition property and
* initial state of the animation, which is hidden
* state having 0 opacity
*/
opacity: 0;
transition: opacity 3s;
}
.item.selected-add-active,
.item.selected-remove-active {
/* Here we specify the final state of the animation,
* which is visible having 1 opacity
*/
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
<div class="item" ng-class="{selected:selected}"></div>
<br>
<br>
<button ng-click="selectToggle();">
{{selected? 'Unselect' : 'Select'}}
</button>
</div>
1为什么我要在第一个状态中指定转换,而不是将其添加到正在切换的类或元素上的静态选择器?,你问。
为了解释这一点,假设您需要一个单向动画,例如fade-out
添加类时的淡出动画。
如果您transition
在类本身上添加属性,fade-out
则即使在动画之后,过渡也会保留在元素上。这意味着当你的最终状态 (fade-out-add-active) 被移除时,元素会慢慢淡入,所以我们得到了一个淡出淡入,这不是我们想要的。