CSS 带有 ng-class 指令的 ng-animate

ng-animate with ng-class directive

提问by NicolasMoise

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 的好例子。所以我想知道人们是否有想要分享的好例子。

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.

我不确定我的最终动画会是什么样子，但就本示例而言，假设我只想在添加 class 时使 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{??}

回答by T J

Animating an ng-classaddition 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 workingdue incorrect understanding of the order in which classes are added.

ng-class使用 CSS 过渡动画添加或删除有 3 个阶段。这些阶段的顺序非常重要，我几乎花了一天的时间弄清楚为什么一个简单的动画由于对添加类的顺序的错误理解而无法正常工作。

Stage 1:

阶段1：

classname-add/classname-removeclass is added.

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

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

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

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

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

Stage 2:

第二阶段：

classnameclass 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:

第 3 阶段：

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

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

This is added afterthe 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 (selectedclass change using ng-class).

为了看到它的实际效果，让我们创建一个经典的淡入淡出动画，当元素的选定状态发生变化时（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>

---

---

¹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.

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

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

为了解释这一点，假设您需要一个单向动画，例如fade-out添加类时的淡出动画。

If you add transitionproperty on the fade-outclass 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在fade-out类本身上添加属性，即使在动画之后，过渡也会保留在元素上。这意味着当你的最终状态 (fade-out-add-active) 被移除时，元素会慢慢淡入，所以我们得到了一个淡出淡入，这不是我们想要的。

• Undesired result

• Desired result

• 不希望的结果

• 想要的结果

回答by NicolasMoise

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 transitionproperty 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 类。您可以直接将 CSS3transition属性插入到您的基类中。与其他 ng-animate 案例不同，我相信所有动画都是在 CSS3 中完成的（不会像使用 ng-include 等动画那样弄乱 DOM...）。

I want to thank Ilan Frumerfor 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 的动画非常相似但略有不同。因此，我决定发布我的示例。