Class and ngClass animation hooks
AngularJS also pays attention to CSS class changes on elements by triggering the add and remove hooks. This means that if a CSS class is added to or removed from an element then an animation can be executed in between, before the CSS class addition or removal is finalized. (Keep in mind that AngularJS will only be able to capture class changes if an expression or the ng-class directive is used on the element.)
The example below shows how to perform animations during class changes:
Css-animation text example:
<html>
<head>
<title>animate-css-class</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.css-class-add, .css-class-remove {
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.css-class,
.css-class-add.css-class-add-active {
color: red;
font-size:3em;
}
.css-class-remove.css-class-remove-active {
font-size:1.0em;
color: #0000FF;
}
</style>
<script src="angular.min.js"></script>
<script src="angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">
<h2>CSS-Animated Text</h2>
<p>
<input type="button" value="set" ng-click="myCssVar='css-class'">
<input type="button" value="clear" ng-click="myCssVar=''">
<br>
<span ng-class="myCssVar">Senior Faculty of vision computer is so experience by D.G.Prasad.
</span>
</p>
</body>
</html>
Which directives support animations?
A handful of common AngularJS directives support and trigger animation hooks whenever any major event occurs during its life cycle. The table below explains in detail which animation events are triggered
Directive |
Supported Animations |
enter, leave, and move |
|
enter and leave |
|
enter and leave |
|
enter and leave |
|
enter and leave |
|
add and remove |
|
add and remove (the ng-hide class value) |
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743