Advanced angular-animate

Presented by Lukas Ruebbelke at the 2015 ng-conf in Salt Lake City, Utah.

@simpulton

angular-animate is just the candy shell on your chocolaty CSS/JS animations.

ng-fx

Events & Convention

Events

  • enter
  • leave
  • move
  • addClass
  • removeClass

Convention

[class][event][state]

.repeat-item.ng-leave.ng-leave-active
/* you can also define the trasition style on the base class as well (.repeat-item) */

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  transition: 0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity: 0;
}

.repeat-item.ng-enter.ng-enter-active,
.repeat-item.ng-leave {
  opacity: 1;
}

JavaScript:

myApp.animation('.fade', function() {
  reture {
    // call done when the animation is over
    enter: function(element, done) {}

    // leave and move are the same as enter
      leave: function(element, done) {}
    move: function(element, done) {}

    // this is called BEFORE the class is added
      beforeAddClass: function(element, className, done) {}

    // this is called AFTER the class is added
      addClass: function(element, className, done) {}

    // this is called BEFORE the class is removed
      beforeRemoveClass: function(element, className, done) {}

    // this is called AFTER the class is removed
      removeClass: function(element, className, done) {}

  };
})
};

Greensock.js animation library

Live Coding.

This post is from the ng-conf Series. If you enjoyed it, please check out the others below.