22

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

我不确定我的最终动画会是什么样子,但出于本示例的目的,假设我只想在添加 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{??}
4

2 回答 2

27

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

阶段1:

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

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

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

第 2 阶段:

classname类被添加或删除。

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

第三阶段:

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>


1为什么我要在第一个状态中指定转换,而不是将其添加到正在切换的类或元素上的静态选择器?,你问。

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

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

于 2016-06-30T12:07:55.540 回答
14

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

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

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

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

于 2014-02-03T20:36:30.627 回答