Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Created July 29, 2015 07:52
Show Gist options
  • Save anonymoussc/a5c7a6a55542503a30d9 to your computer and use it in GitHub Desktop.
Save anonymoussc/a5c7a6a55542503a30d9 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS ngClass Animation
Raw
README.md

##AngularJS ngClass Animation

Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngClass Animation</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div>
<div>
<button ng-click="toggleNgClass = !toggleNgClass">Toggle ngClass</button>
<div class="initialClass" ng-class="{'animationClass' : toggleNgClass}">
This element has class 'initialClass' and the ngClass directive is declared as
ng-class="{'animationClass' : toggleNgClass}"
</div>
</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>
Raw
script.js
var app = angular.module('myApp', ['ngAnimate']);
Raw
style.css
/* ngclass animation */
/*This is the initialClass, that keeps in the element*/
.initialClass {
background-color : white;
color : black;
border : 1px solid black;
}
/* This is the animationClass, that is added or removed by the ngClass expression*/
.animationClass {
background-color : black;
color : white;
border : 1px solid white;
}
/* This is the animationd definition, this class is added when the animationClass is about to be appended to element classes*/
.initialClass.animationClass-add {
-webkit-animation : 1s ng-class-animation;
-moz-animation : 1s ng-class-animation;
-ms-animation : 1s ng-class-animation;
-o-animation : 1s ng-class-animation;
animation : 1s ng-class-animation;
}
/* This is the animationd definition, this class is added when the animationClass is about to be appended to element classes*/
.initialClass.animationClass-remove {
-webkit-animation : 1s ng-class-animation reverse;
-moz-animation : 1s ng-class-animation reverse;
-ms-animation : 1s ng-class-animation reverse;
-o-animation : 1s ng-class-animation reverse;
animation : 1s ng-class-animation reverse;
}
@-webkit-keyframes ng-class-animation {
from {
background-color : white;
color : black;
border : 1px solid black;
}
to {
background-color : black;
color : white;
border : 1px solid white;
}
}
@-moz-keyframes ng-class-animation {
from {
background-color : white;
color : black;
border : 1px solid black;
}
to {
background-color : black;
color : white;
border : 1px solid white;
}
}
@-ms-keyframes ng-class-animation {
from {
background-color : white;
color : black;
border : 1px solid black;
}
to {
background-color : black;
color : white;
border : 1px solid white;
}
}
@-o-keyframes ng-class-animation {
from {
background-color : white;
color : black;
border : 1px solid black;
}
to {
background-color : black;
color : white;
border : 1px solid white;
}
}
@keyframes ng-class-animation {
from {
background-color : white;
color : black;
border : 1px solid black;
}
to {
background-color : black;
color : white;
border : 1px solid white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment