使用ng-class指令的ng-animate

You can use ng-animate with ng-class with the add and remove animations. I'm looking to make one animation in CSS3 but haven't found good examples with ng-class online. So I was wondering if people have good examples they want to share.

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

I am not sure what my final animation will look like, but for the purpose of this example let's say I just want to make the height of the div gradually increase when I add the class myclass.

我不确定我的最终动画会是什么样子，但是为了这个例子的目的，让我说我只想在添加类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{??}

2 个解决方案

#1

Animating an ng-class addition or removal using CSS transition has 3 stages. The order of these stages are very important, I almost spent a day figuring out why a simple animation wasn't working due incorrect understanding of the order in which classes are added.

使用CSS转换动画ng类添加或删除有3个阶段。这些阶段的顺序非常重要，我几乎花了一天时间弄清楚为什么简单的动画不能正常工作，因为对添加类的顺序的理解不正确。

Stage 1:

classname-add/classname-remove class is added.

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

Unlike what someone might think, this is actually added before the class is added to/removed from the element.

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

This is the stage where we should add the transition property ¹ as well as initial state of our animation.

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

Stage 2:

classname class is added or removed.

添加或删除classname类。

This is where you specify the eventual styles of the element. This class often has nothing to do with our animation. Remember that we are animating the addition/removal of this class. This class itself shouldn't even need to be aware that there is an animation taking place around it.

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

Stage 3:

classname-add-active/classname-remove-active class is added.

添加了classname-add-active / classname-remove-active类。

This is added after the class is added to/removed from the element.

在将类添加到元素中/从元素中删除后添加。

This is the stage where we should specify the final state of our animation.

这是我们应该指定动画的最终状态的阶段。

---

To see this in action, let's create a classic fade-in-out animation shown when an element's selected state changes (selected class change using ng-class).

为了看到这一点，让我们创建一个经典的淡入动画，当元素的选定状态发生变化时显示（使用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>

---

¹ Why should I specify the transition in the first state, instead of just adding it to the class being toggled or a static selector on the element?, you ask.

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

Well to explain this, assume you need a one-directional animation, for example a fade-out animation when a fade-out class is added.

好吧解释一下，假设您需要单向动画，例如添加淡出类时的淡出动画。

If you add transition property on the fade-out class itself, the transition stays on the element even after the animation. Which means when your final state (fade-out-add-active) is removed, the element will slowly fade-in back, so we get a fade-out-fade-in which is not what we wanted.

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

• Undesired result

  不受欢迎的结果

• Desired result

  期望的结果

#2

I've found a solution to this problem so I thought I'd share it.

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

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

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

What's nice about this one is that it only requires two CSS classes. You can directly insert the CSS3 transition property into your base class. Unlike other ng-animate cases, I believe all the animations are done in CSS3 (no messing with the DOM like with animations with ng-include etc...).

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

I want to thank Ilan Frumer for the link to his answer. His solution was for animation with ng-show which is very similar but a little different from animations with ng-class. Hence why I decided to post my example.

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