css3 – ng-an动画与ng-class指令

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

我不知道我的最终动画是什么样的,但为了这个例子的目的,我只是想让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{??}

解决方法

使用CSS转换动画化ng类添加或删除有3个阶段.这些阶段的顺序非常重要,I almost spent a day figuring out why a simple animation wasn’t working由于不正确地了解了添加类的顺序.

阶段1：

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

与某人可能会想到的不同,实际上,在将类添加到元素之前添加到该元素中.

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

阶段2：

添加或删除classname类.

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

阶段3：

添加了classname-add-active / classname-remove-active类.

在将类添加到元素之后添加.

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

为了看到这一点,让我们创建一个经典的渐隐动画,当一个元素的选定状态发生变化时(使用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为什么要在第一个状态中指定转换,而不是将其添加到被切换的类或元素上的静态选择器？

那么为了解释这一点,假设你需要一个单向的动画,例如淡入淡出的类添加时的淡出动画.

如果您在淡入淡出类中添加过渡属性,即使在动画之后,转换仍保留在元素上.这意味着当你的最终状态(淡出加成)被移除时,元素会慢慢退色,所以我们得到一个淡出淡出的东西,这不是我们想要的.

> Undesired result
> Desired result

css3 – ng-an动画与ng-class指令

解决方法

猜你在找的CSS相关文章