css - 使用 ng-class 指令的 ng-animate

Question

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

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

这是在将类添加到元素/从元素中删除之后添加的。

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

---

要查看实际效果，让我们创建一个经典的淡入淡出动画，当元素的选定状态发生变化(使用 ng-class 更改selected 类)时显示。

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 类时的淡出动画。

如果您在 fade-out 类本身上添加 transition 属性，即使在动画之后，过渡也会保留在元素上。这意味着当您的最终状态(淡出-添加-事件)被移除时，该元素将慢慢淡入，所以我们得到一个淡出-淡入，这不是我们想要的想要。

• Undesired result

• Desired result