在animate.css中使用ng动画

Question

我正在尝试理解和使用ngAnimate。

我使用的是角动画.‘m，animate.css和角1.3.

现在，我已经在我的应用程序conf ngAnimate上添加了激活它的内容，并在我的css中添加了类似这样的内容：

.ng-leave{
   -webkit-animation-name: fadeInUp;
   -moz-animation-name: fadeInUp;
   -o-animation-name: fadeInUp;
   animation-name: fadeInUp;
}

它的工作是因为，fadeInUp是在animate.css中声明的。

所以，现在我想不写css就做同样的事情(只使用animate.css)。

我试过这样的方法，但不起作用

<li class="list cars" ng-repeat="item in cars track by item.id" ng-animate="{enter: 'fadeInUp animated', leave: 'fadeOutUp animated'}">

知道吗？

谢谢

Answer 1

步骤：-

1)提供抚养：-

angular.module('yo', [
        'ngAnimate'
    ]);

在脚本标记中添加“角-动画.min.js”。

2)执行动画的方法有三种：- a)CSS转换。( b) CSS关键帧动画c) JavaScript动画。

3)选择上述任何一个：-例如，如果您的模板是

<div ng-init="on=true">
  <button ng-click="on=!on">Toggle On/Off</button>
  <div class="my-special-animation" ng-if="on">
    This content will enter and leave
  </div>
</div>

在元素中添加CSS转换所需的类属性，只需添加以下css:-

.my-special-animation.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  background:red;
}

/* destination animations */
.my-special-animation.ng-enter.ng-enter-active {
  background:blue;
}

柱塞:- http://plnkr.co/edit/?p=preview

CSS关键帧动画比转换更广泛，它们被相同的浏览器( IE9和下面的浏览器除外)所支持。CSS命名样式类似，但不需要使用-active类，因为关键帧动画是在CSS @keyframes声明块中完全管理的。

.my-special-animation.ng-enter {
  -webkit-animation:0.5s red-to-blue;
  animation:0.5s red-to-blue;
}

@keyframes red-to-blue {
  from { background:red; }
  to { background:blue; }
}

@-webkit-keyframes red-to-blue {
  from { background:red; }
  to { background:blue; }
}

柱塞：- http://plnkr.co/edit/?p=preview

如果您想要执行具有更多控件的动画，则可以始终使用JavaScript动画。这是通过在模块代码中定义类似工厂的函数来实现的，如下所示：

myApp.animation('.my-special-animation', function() {
  return {
    enter : function(element, done) {
      jQuery(element).css({
        color:'#FF0000'
      });

      //node the done method here as the 2nd param
      jQuery(element).animate({
        color:'#0000FF'
      }, done);

      return function(cancelled) {
        /* this (optional) function is called when the animation is complete
           or when the animation has been cancelled (which is when
           another animation is started on the same element while the
           current animation is still in progress). */
        if(cancelled) {
          jQuery(element).stop();
        }
      }
    },

    leave : function(element, done) { done(); },
    move : function(element, done) { done(); },

    beforeAddClass : function(element, className, done) { done(); },
    addClass : function(element, className, done) { done(); },

    beforeRemoveClass : function(element, className, done) { done(); },
    removeClass : function(element, className, done) { done(); },

    allowCancel : function(element, event, className) {}
  };
});

柱塞：- http://plnkr.co/edit/?p=preview