ngAnimate Talk – AngularJS and Animations – How to make animations in AngularJS



ngAnimate Talk – AngularJS and Animations – How to make animations in AngularJS

0 2


ng-animate-talk

JRS fun friday talk about ngAnimate 1.2

On Github twilson63 / ng-animate-talk

ngAnimate Talk

AngularJS and Animations

Created by Tom Wilson / @twilson63

Heads Up

In this talk we will discuss the new ngAnimate module for AngularJS 1.2.0

The ngAnimate module is a separate ngModule maintained by the core AngularJS team.

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;
  }
            
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Demo

http://jsfiddle.net/simurai/CGmCe/light/

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

http://codepen.io/twilson63/pen/hizlq

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'])
            

Implementations

  • ngRepeat
  • ngView, ngIf, ngInclude
  • animate.css
  • ngClass
  • ngShow, ngHide

ng-repeat

See the Pen zGgxH by Tom Wilson (@twilson63) on CodePen

ngView, ngIf, ngInclude

See the Pen EeLxg by Tom Wilson (@twilson63) on CodePen

ngClass

See the Pen awEue by Tom Wilson (@twilson63) on CodePen

ngShow, ngHide

See the Pen kimIp by Tom Wilson (@twilson63) on CodePen

Animate.css

http://daneden.me/animate/ https://github.com/yearofmoo/ngAnimate-animate.css

Thank You

For more information check out! Year of Moo Blog