css - 将 ng-animate 与 animate.css 结合使用

Question

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

我正在使用 angular-animate.js、animate.css 和 angular 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'
    ]);

在您的脚本标签中添加“angular-animate.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 Transition 的动画需要在您的元素中添加类属性，只需添加以下 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 Keyframe 动画比 Transitions 更广泛，它们受相同浏览器(IE9 及以下版本除外)的支持。 CSS 命名风格相似，但不需要使用 -active 类，因为关键帧动画完全在 CSS @keyframes 声明 block 中管理

.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 动画如果你想执行具有更多控制的动画，那么你总是可以使用 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