Using ng-animate with animate.css

问题

I'm trying to understand and use ngAnimate.

I'm using angular-animate.js, animate.css and angular 1.3.

Right now, I've add on my app conf ngAnimate to activate it and I've add to my css something like that :

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

It's working because, fadeInUp is declare in animate.css.

So, now I would like to do the same thing without writing css (by juste using animate.css)

I've tried something like that, but it's not working

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

Any idea ?

Thanks

回答1:

Steps:-

1) Provide dependency:-

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

with "angular-animate.min.js" added in your script tag.

2) There are three ways to perform animation:- a)CSS Transitions. b) CSS Keyframe Animations c) JavaScript Animations.

3) Choose any of the above like:- For example if your template is

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

Animation by CSS Transition required class attribute in your element and just add following 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 animations are more extensive than Transitions and they're supported by the same browsers (other than IE9 and below). The CSS naming style is similar, but there is no need to use an -active class since keyframe animations are fully managed within a CSS @keyframes declaration 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; }
}

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

JavaScript Animations If you want to perform animations that have more control then you can always use JavaScript animations. This works by defining a factory-like function inside of your module code like so:

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

来源：https://stackoverflow.com/questions/27994706/using-ng-animate-with-animate-css

标签

css

angularjs

ng-animate