AngularJS animattion using ng-class

Angular ngAnimate can be used to create animation effect using animation aware directives.

Usage:

<script src="angular.js">
<script src="angular-animate.js">
<script>
  angular.module("app", ["ngAnimate"]);
</script>

Example – animate with ng-class

This example uses ng-class to toggle presence on class on. The animation is achieved using css transition property on background-color.

<style>
.highlight { transition:1s linear all; }
.highlight.on { background-color:lightblue;}
</style>

<div ng-app="myApp" ng-controller='MyCtrl'>
  <div ng-class="{on:onOff}" class="highlight" ng-init="onOff=false">
    Highlight this box (with animation)
  </div>
  <button ng-click="onOff=!onOff">Toggle</button>
   (onOff={{onOff}})
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script>
  var module = angular.module('myApp', ["ngAnimate"]);
  module.controller('MyCtrl', function($scope) {});
</script>
refresh

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments