使用ng-class指令进行ng-animate

Question

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

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

Answer 1

ng-class使用CSS过渡动画添加或删除有3个阶段.这些阶段的顺序是非常重要的,我几乎花了一天时间搞清楚为什么一个简单的动画不能正常工作在其中添加类的顺序是由于不正确的认识.

阶段1:

classname-add/ classname-removeclass已添加.

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

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

第二阶段:

classname 添加或删除类.

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

第3阶段:

classname-add-active/ classname-remove-activeclass已添加.

这被加入后的类被添加到/从元件除去.

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

看到这个动作,让我们创建当一个元件的选择状态的改变(示出一个典型的淡入出动画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添加一个类时的淡出动画.

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

• 不受欢迎的结果

• 期望的结果

Answer 2

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

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

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

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