将动画与 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 元素中需要 class 属性，只需添加以下 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 class，因为关键帧动画在 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 动画如果你想执行具有更多控制的动画，那么你总是可以使用 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

将动画与 animate.css 结合使用

Using ng-animate with animate.css

css

angularjs

ng-animate