Question

您可以将ng-animate与ng-class一起使用添加和删除动画。我想在CSS3中制作一个动画但是没有找到ng-class online的好例子。所以我想知道人们是否有他们想要分享的好例子。

我不确定我的最终动画会是什么样子，但是为了这个例子的目的，让我说我只想在我添加类myclass时逐渐增加div的高度。

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}

Answer 1

使用CSS过渡动画添加或删除ng-class有3个阶段。由于对添加类的顺序的错误理解，这些阶段的顺序非常重要，I almost spent a day figuring out why a simple animation wasn't working。

第1阶段：

classname-add / classname-remove 类已添加。

与某人的想法不同，实际上是在之前添加>将该类添加到元素中/从元素中删除。

这是我们应该添加transition属性¹以及动画的初始状态的阶段。

第2阶段：

classname 类已添加或删除。

您可以在此处指定元素的最终样式。这个课通常与我们的动画无关。请记住，我们正在动画添加/删除此类。这个类本身甚至不需要知道周围有动画。

第3阶段：

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>

¹为什么我应该在第一个状态中指定转换，而不是仅仅将它添加到要切换的类或元素上的静态选择器？

很好地解释一下，假设你需要一个单向动画，例如添加fade-out类时的淡出动画。

如果在transition类本身上添加fade-out属性，则即使在动画之后，转换也会保留在元素上。这意味着当你的最终状态（淡出 - 添加 - 活跃）被删除时，元素将慢慢淡入淡出，所以我们得到淡出淡出，这不是我们的想要的。

Undesired result

Desired result

Answer 2

我找到了解决这个问题的方法，所以我想我会分享它。

http://jsfiddle.net/nicolasmoise/XaL9r/1/

这个有什么好处，它只需要两个CSS类。您可以直接将CSS3 transition属性插入到基类中。与其他ng-animate案例不同，我相信所有的动画都是在CSS3中完成的（没有像使用ng-include等动画那样搞乱DOM）。

我要感谢Ilan Frumer获得他答案的链接。他的解决方案是用于ng-show的动画，它非常相似，但与ng-class的动画有点不同。因此我决定发布我的例子。

使用ng-class指令进行ng-animate

2 个答案:

第1阶段：

第2阶段：

第3阶段：