您可以使用ng-animate与ng-class添加和删除动画.我想在CSS3中制作一个动画,但在网络上没有找到很好的例子.所以我想知道人们有很好的例子,他们想分享.
我不知道我的最终动画是什么样的,但为了这个例子的目的,我只是想让div的高度逐渐增加,当我添加类myclass.
<div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>
**CSS**
.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}
解决方法
使用CSS转换动画化ng类添加或删除有3个阶段.这些阶段的顺序非常重要,I almost spent a day figuring out why a simple animation wasn’t working由于不正确地了解了添加类的顺序.
阶段1：
添加了classname-add / classname-remove类.
与某人可能会想到的不同,实际上,在将类添加到元素之前添加到该元素中.
阶段2：
这是您指定元素的最终样式的地方.这个类通常与我们的动画无关.记住,我们正在动画添加/删除这个类.这个类本身甚至不需要知道它周围有一个动画.
阶段3：
添加了classname-add-active / classname-remove-active类.
这是我们应该指定动画的最终状态的阶段.
为了看到这一点,让我们创建一个经典的渐隐动画,当一个元素的选定状态发生变化时(使用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为什么要在第一个状态中指定转换,而不是将其添加到被切换的类或元素上的静态选择器？
那么为了解释这一点,假设你需要一个单向的动画,例如淡入淡出的类添加时的淡出动画.
如果您在淡入淡出类中添加过渡属性,即使在动画之后,转换仍保留在元素上.这意味着当你的最终状态(淡出加成)被移除时,元素会慢慢退色,所以我们得到一个淡出淡出的东西,这不是我们想要的.
