anonymoussc · August 8, 2015 22:51
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html ng-app="myApp">

 <head>
    <title>AngularJS ngClass staggering animation</title>
    <link href="style.css" rel="stylesheet"/>
 </head>

 <body>
    <div id="parentElement">
        <button ng-click="toggleNgClass = !toggleNgClass">Toggle ngClass animation</button>
        <div ng-class="{'animationClass' : toggleNgClass}" class="ngClassAnimationSample">
            First element
        </div>
        <div ng-class="{'animationClass' : toggleNgClass}" class="ngClassAnimationSample">
            Second element
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
    <script src="script.js"></script>
 </body>

 </html>
diff --git a/script.js b/script.js
 angular.module('myApp', ['ngAnimate']);
diff --git a/style.css b/style.css
 /* ngclass animation */
 .ngClassAnimationSample {
    background-color : white;
    border           : 1px solid black;
 }

 .ngClassAnimationSample.animationClass-add-stagger {
    -webkit-transition-delay    : 0.3s;
    transition-delay            : 0.3s;
    -webkit-transition-duration : 0;
    transition-duration         : 0;
 }

 .ngClassAnimationSample.animationClass-add {
    -webkit-transition : all ease-in-out 1s;
    -moz-transition    : all ease-in-out 1s;
    -ms-transition     : all ease-in-out 1s;
    -o-transition      : all ease-in-out 1s;
    transition         : all ease-in-out 1s;
 }

 .ngClassAnimationSample.animationClass-add-active {
    background-color : black;
 }

 #parentElement > div:nth-child(2n+1).animationClass-add-active {
    background-color : red;
 }
	<!DOCTYPE html>
	<html ng-app="myApp">

	<head>
	<title>AngularJS ngClass staggering animation</title>
	<link href="style.css" rel="stylesheet"/>
	</head>

	<body>
	<div id="parentElement">
	<button ng-click="toggleNgClass = !toggleNgClass">Toggle ngClass animation</button>
	<div ng-class="{'animationClass' : toggleNgClass}" class="ngClassAnimationSample">
	First element
	</div>
	<div ng-class="{'animationClass' : toggleNgClass}" class="ngClassAnimationSample">
	Second element
	</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	/* ngclass animation */
	.ngClassAnimationSample {
	background-color : white;
	border : 1px solid black;
	}

	.ngClassAnimationSample.animationClass-add-stagger {
	-webkit-transition-delay : 0.3s;
	transition-delay : 0.3s;
	-webkit-transition-duration : 0;
	transition-duration : 0;
	}

	.ngClassAnimationSample.animationClass-add {
	-webkit-transition : all ease-in-out 1s;
	-moz-transition : all ease-in-out 1s;
	-ms-transition : all ease-in-out 1s;
	-o-transition : all ease-in-out 1s;
	transition : all ease-in-out 1s;
	}

	.ngClassAnimationSample.animationClass-add-active {
	background-color : black;
	}

	#parentElement > div:nth-child(2n+1).animationClass-add-active {
	background-color : red;
	}