ngAnimate Talk

How to make animations in AngularJS

• CSS Transitions
• CSS Keyframe Animations
• JavaScript Animations

CSS Transitions

provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

  #delay1 {
    position: relative;
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 2s;
    font-size: 14px;
  }

  #delay1:hover {
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 2s;
    font-size: 36px;
  }
            

CSS Keyframes

The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation.

JavaScript Animations

  $( "#clickme" ).click(function() {
    $( "#book" ).animate({
      opacity: 0.25,
      left: "+=50",
      height: "toggle"
    }, 5000, function() {
      // Animation complete.
    });
  });
            

http://api.jquery.com/animate/

Walk Thru

Sample HTML

  

    Toggle On/Off
    

      This content will enter and leave
    
  
              
            

CSS Transitions

              
  /* starting animations */
  .my-special-animation.ng-enter {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;

    background:red;
  }

  /* destination animations */
  .my-special-animation.ng-enter.ng-enter-active {
    background:blue;
  }
              
            

Demo

The .ng-enter and .ng-enter-active CSS classes are generated and appended to the element by AngularJS when the ngIf tells it that it's adding a new item into the repeat list. Depending on the animation, other CSS classes are added. Here's a breakdown of which directives add which CSS classes.

Install and Setup

Install

Using bower

  bower install angular-animate --save
            

  # index.html
  
            

Install

Using CDN

  # index.html
  
            

Setup

  angular.module('App', ['ngAnimate'])