带有 ng-class 指令的 ng-animate

Posted 2023-02-19

【中文标题】带有 ng-class 指令的 ng-animate

【英文标题】：ng-animate with ng-class directive

【发布时间】：2014-02-11 05:50:13

【问题描述】：

您可以使用 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??

【问题讨论】：

在这里查看我的答案：***.com/questions/21071668/…

从 Angular 1.2 开始，ngAnimate 的工作方式发生了变化。全部看这里。 yearofmoo.com/2013/08/…

【参考方案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 类时的淡出动画。

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

Undesired result

Desired result

【参考方案2】：

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

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

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

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

【讨论】：

这并没有使用ng-animate，虽然

真的没必要，只用 CSS3 动画和 ng-class 就可以实现活泼的动画了。

新的 ng-animate（我认为是 1.2.0 +）主要由 CSS3 动画驱动，也有 javascript 替代品

什么？我什至没有看到你的答案

这很好，但是对于点击时的闪烁有什么办法吗？