Skip to content

Instantly share code, notes, and snippets.

@anonymoussc
Created August 7, 2015 09:55
Show Gist options
  • Save anonymoussc/3ab4d42c9ef6a79fffd4 to your computer and use it in GitHub Desktop.
Save anonymoussc/3ab4d42c9ef6a79fffd4 to your computer and use it in GitHub Desktop.
AngularJS ngIf with CSS Animation and fallback for JavaScript animation

##AngularJS ngIf with CSS Animation and fallback for JavaScript animation

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngIf with CSS Animation and fallback for JavaScript animation</title>
</head>
<body>
<style>
/* ngIf animation */
.ifJsAnimation.ng-enter,
.ifJsAnimation.ng-leave {
-webkit-transition : opacity ease-in-out 1s;
-moz-transition : opacity ease-in-out 1s;
-ms-transition : opacity ease-in-out 1s;
-o-transition : opacity ease-in-out 1s;
transition : opacity ease-in-out 1s;
}
.ifJsAnimation.ng-enter,
.ifJsAnimation.ng-leave.ng-leave-active {
opacity : 0;
}
.ifJsAnimation.ng-leave,
.ifJsAnimation.ng-enter.ng-enter-active {
opacity : 1;
}
</style>
<div>
<button ng-click="toggleNgIf = !toggleNgIf">Display/Remove the div below</button>
<div ng-if="toggleNgIf" class="ifJsAnimation">
This is a div element with ng-if="toggleNgIf"
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script src="script.js"></script>
</body>
</html>
/**
* @name ifJsAnimation
* @desc The ngIf sample animation function
*/
function ifJsAnimation() {
function animateOpacity(element, done, opacity) {
jQuery(element).animate({
opacity : opacity
}, 1000, done);
}
/**
* @name enterAnimation
* @desc The enter animation function called when an element enters DOM
* @param element - The element that is entering DOM
* @param done - Callback function, it must be called to finish the animation
*/
var enterAnimation = function (element, done) {
if (!Modernizr.csstransitions) {
//Animate the opacity
jQuery(element).css({opacity : 0});
animateOpacity(element, done, 1);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
} else {
done();
}
}
/**
* @name leaveAnimation
* @desc The leave animation function called when an element leaves DOM
* @param element - The element that is leaving DOM
* @param done - Callback function, it must be called to finish the animation
*/
var leaveAnimation = function (element, done) {
if (!Modernizr.csstransitions) {
animateOpacity(element, done, 0);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
}
else {
done();
}
}
return {
enter : enterAnimation,
leave : leaveAnimation
};
}
var app = angular.module('myApp', ['ngAnimate'])
.animation(".ifJsAnimation", ifJsAnimation);
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment