Angular Animations
AngularJS Animations
AngularJS provides animated transitions, amongst assistance from CSS.
What is an Animation?
An animation is when the transformation of an HTML chemical component division gives yous an illusion of motion.Example:
Check the checkbox to enshroud the DIV: <body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Applications should non hold upwardly filled amongst animations, simply around animations tin sack brand the application easier to understand.
What create I Need?
To brand your applications educate for animations, yous must include the AngularJS Animate library: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script> Then yous must refer to the
ngAnimate module inwards your application: <body ng-app="ngAnimate"> ngAnimate every bit a dependency inwards your application module:Example
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script> What Does ngAnimate Do?
The ngAnimate module adds in addition to removes classes.The ngAnimate module does non animate your HTML elements, simply when ngAnimate honor sure enough events, similar enshroud or demonstrate of an HTML element, the chemical component division gets around pre-defined classes which tin sack hold upwardly used to brand animations.
The directives inwards AngularJS who add/remove classes are:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show in addition to ng-hide directives adds or removes a ng-hide degree value.The other directives adds a
ng-enter degree value when they acquire into the DOM, in addition to a ng-leave attribute when they are removed from the DOM.The
ng-repeat directive likewise adds a ng-move degree value when the HTML chemical component division changes position. In addition, during the animation, the HTML chemical component division volition get got a laid of degree values, which volition hold upwardly removed when the animation has finished. Example: the
ng-hide directive volition add together these degree values:ng-animateng-hide-animateng-hide-add(if the chemical component division volition hold upwardly hidden)ng-hide-remove(if the chemical component division volition hold upwardly showed)ng-hide-add-active(if the chemical component division volition hold upwardly hidden)ng-hide-remove-active(if the chemical component division volition hold upwardly showed)
Animations Using CSS
We tin sack role CSS transitions or CSS animations to animate HTML elements. This tutorial volition demonstrate yous both.To larn to a greater extent than nearly CSS Animation, written report our CSS Transition Tutorial in addition to our CSS Animation Tutorial.
CSS Transitions
CSS transitions allows yous to modify CSS holding values smoothly, from i value to another, over a given duration:Example:
When the DIV chemical component division gets the.ng-hide class, the transition volition get got 0.5 seconds, in addition to the superlative volition smoothly modify from 100px to 0: <style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;}
.ng-hide {
height: 0;}</style>
CSS Animations
CSS Animations allows yous to modify CSS holding values smoothly, from i value to another, over a given duration:Example:
When the DIV chemical component division gets the.ng-hide class, the myChange animation volition run, which volition smoothly modify the superlative from 100px to 0: <style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}}
div {
height: 100px;
background-color: lightblue;}
div.ng-hide {
animation: 0.5s myChange;}</style> 
Comments
Post a Comment