用ng-class指令进行ng-animate [英] ng-animate with ng-class directive

问题描述

您可以将ng-animate与ng-class一起使用，以添加和删除动画。我希望在CSS3中制作一个动画，但尚未在ng-class在线上找到好的示例。因此，我想知道人们是否想分享很好的例子。

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.

我不确定最终的动画效果如何，但出于这个示例的目的，让我们说我只想在添加类 myclass 时使div的高度逐渐增加。

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.

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}

推荐答案

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

Animating an ng-class addition 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 working due incorrect understanding of the order in which classes are added.

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

classname-add/classname-remove class is added.

与其他人的想法不同，它实际上是在将类添加到元素或从元素中删除之前添加的。

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

在这个阶段，我们应该添加过渡属性 ¹ 作为以及动画的初始状态。

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

classname 类被添加或删除。

classname class is added or removed.

在这里您可以指定最终样式元件。此类通常与我们的动画无关。请记住，我们正在为该类的添加/删除添加动画效果。此类本身甚至不需要知道周围正在发生动画。

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.

classname-add-active / classname-remove-激活的 类。

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

在添加到/从/删除该类后的添加

This is added after the class is added to/removed from the element.

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

This is the stage where we should specify the final state of our animation.

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

To see this in action, let's create a classic fade-in-out animation shown when an element's selected state changes (selected class change using 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-out class is added.

如果添加过渡淡出类本身的code>属性，即使在动画之后，过渡也保留在元素上。这意味着当您删除最终状态（淡入添加有效）时，该元素将缓慢淡入，因此我们得到了淡入淡入，这不是我们所需要的

If you add transition property on the fade-out class 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.

• 不需要结果

期望的结果

这篇关于用ng-class指令进行ng-animate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！