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.

Demo

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

  <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 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
  <script src="bower_components/angular-animate/angular-animate.min.js">
  </script>
            

Install

Using CDN

  # index.html
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/
  angular-animate.min.js">
  </script>
            

Setup

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