Using ng-animate with animate.css

Question

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

squiroid · Accepted Answer · 2015-01-17 01:37:51Z

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

Hi, thanks for your answer but I know how to use animation. I juste want to don't write any css :)

Collectives™ on Stack Overflow

Using ng-animate with animate.css

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related