AngularJS animattion using ng-class

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


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

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.

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

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

<script src="//"></script>
<script src="//"></script>
  var module = angular.module('myApp', ["ngAnimate"]);
  module.controller('MyCtrl', function($scope) {});

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


Click here to write/view comments