Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Created August 7, 2015 10:12
Show Gist options
  • Save anonymoussc/0118f93d3a33e64978ab to your computer and use it in GitHub Desktop.
Save anonymoussc/0118f93d3a33e64978ab to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS custom directives animations
Raw
README.md

##AngularJS custom directives animations

$animate method's signatures:

$animate.addClass(element, className); $animate.removeClass(element, className);

Both functions receive the element parameter that will have a class added or removed and the className class that will be used and return a promise that is resolved once the animation has completed itself or has been cancelled.

There are three more methods that can be used to trigger animations:

$animate.enter(element, parentElement, afterElement); $animation.leave(element); $animation.move(element, parentElement, afterElement);

Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS custom directives animations</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div custom-directive class="customAnimation">
<p>This element has class 'customAnimation' and the directive attribute "custom-directive"</p>
<p>Click here to toggle animation</p>
</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'])
.directive('customDirective', function ($animate) {
return {
link : function ($scope, $element, $attrs) {
var isActive = true;
$element.on('click', function () {
isActive = !isActive;
// Toggle between add class and remove class
if (isActive) {
$animate.addClass($element, 'customClick');
} else {
$animate.removeClass($element, 'customClick');
}
//Trigger digest in this case, because this listener function is out of the angular world
$scope.$apply();
});
}
}
});
Raw
style.css
/* customAnimation */
.customAnimation {
background-color : white;
padding : 20px;
transition : all linear 1s;
}
.customClick {
background-color : #FF0099;
padding : 40px;
}
.customAnimation.customClick-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;
}
@-webkit-keyframes ng-class-animation {
from {
background-color : white;
border : 1px solid black;
}
to {
background-color : black;
border : 1px solid white;
}
}
@-moz-keyframes ng-class-animation {
from {
background-color : white;
border : 1px solid black;
}
to {
background-color : black;
border : 1px solid white;
}
}
@-ms-keyframes ng-class-animation {
from {
background-color : white;
border : 1px solid black;
}
to {
background-color : black;
border : 1px solid white;
}
}
@-o-keyframes ng-class-animation {
from {
background-color : white;
border : 1px solid black;
}
to {
background-color : black;
border : 1px solid white;
}
}
@keyframes ng-class-animation {
from {
background-color : white;
border : 1px solid black;
}
to {
background-color : black;
border : 1px solid white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment