Question

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

我正在使用angular-animate.js，animate.css和angular 1.3。

现在，我已添加我的应用程序conf ngnnimate来激活它，我已经添加到我的CSS这样的东西：

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

它正常工作，因为fadeInUp在animate.css中声明。

所以，现在我想在没有编写css的情况下做同样的事情（通过使用animate.css的juste）

我尝试了类似的东西，但它不起作用

<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'
    ]);

使用＆＃34; angular-animate.min.js＆＃34;添加在脚本标记中。

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;
}

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

CSS Keyframe 动画比Transitions更广泛，并且相同的浏览器（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; }
}

Plunker： - 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) {}
  };
});

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

在animate.css中使用ng-animate

1 个答案: