AngularJS is a rich set of frameworks for creating single-page web applications, bringing all the required functions to building rich and interactive applications. One of the main features is that Angular brings support for animation.
This experience in AngularJS implements the addition of animation effects between the two state switchings of "Show/Hide".
Show/hide animation effects through CSS
Ideas:
→npm install angular-animage
→Dependency: var app = ("app",["ngAnimate"]);
→A variable in controller receives bool value
→A button is provided in the interface and click to change the bool value
→ The displayed/hidden area in the interface provides the binding of ng-if and bool value in controller
var app = ("app",["ngAnimate"]);
("AppCtrl", function(){
= true;
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/"/> <link rel="stylesheet" href=""/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button class="btn" ng-click="=!">Toggle Animation</button> <div class="toggle" ng-if="">Some content here</div> <script src="../node_modules/angular/"></script> <script src="../node_modules/angular-animate/"></script> <script src=""></script> </body> </html>
.toggle{
-webkit-transition: linear 1s;
-moz-transition: linear 1s;
-ms-transition: linear 1s;
-o-transition: linear 1s;
transition: linear 1s;
}
.-enter{
opacity: 0;
}
.-enter-active{
opacity: 1;
}
.-leave{
opacity: 1;
}
.-leave-active{
opacity: 0;
}
Implementation of display/hide animation effects through animation method
("A certain class name", function(){
return {
leave: function(element, done){
},
enter: function(element, done){
}
}
})
How to implement animation effects when animation can add leave, enter events, leave and enter functions to a certain class name? Can be achieved through.
ar app = ("app",["ngAnimate"]);
("AppCtrl", function(){
= true;
})
(".toggle", function(){
return {
leave: function(element, done){
//("nooooo");
(element, 1, {opacity:0, onComplete:done})
},
enter: function(element, done){
(element, 1, {opacity:0, onComplete:done})
}
}
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/topcoat/css/"/> </head> <body class="well-lg" ng-app="app" ng-controller="AppCtrl as app"> <button class="topcoat-button--large--cta" ng-click=" = !">Click me</button> <hr/> <div class="topcoat-notification toggle" ng-if="">I'm too your to fade</div> <script type="text/javascript" src="/ajax/libs/gsap/1.18.0/"></script> <script src="../node_modules/angular/"></script> <script src="../node_modules/angular-animate/"></script> <script src=""></script> </body> </html>
Among them, npm install topcoat is a good style library.
Use direcive to achieve display/hide animation effects
Whether to add an attribute to the displayed/hidden div part, such as hide-me="", hide-me property monitoring, and determine whether to display it according to the change of value.
var app=('app',["ngAnimate"]);
("AppCtrl", function(){
= false;
= function(){
//($("#my-badge"), 1, {opacity:0})
= !;
}
})
("hideMe", function($animate){
return function(scope, element, attrs){
scope.$watch(, function(newVal){
if(newVal){
//(element, 1, {opacity:0});
$(element, "fade");
} else{
$(element, "fade");
}
})
}
})
(".fade", function(){
return {
addClass: function(element, className){
(element, 1, {opacity:0});
},
removeClass: function(element, className){
(element, 1, {opacity:1});
}
}
})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button class="btn-primary" ng-click="()">Click to fade</button> <div class="badge" hide-me="">Fade me</div> <script src="../node_modules/jquery/dist/"></script> <script type="text/javascript" src="/ajax/libs/gsap/1.18.0/"></script> <script src="../node_modules/angular/"></script> <script src="../node_modules/angular-animate/"></script> <script src=""></script> </body> </html>
The above content is a summary of the ways in AngularJS to realize display or hide animation effects that the editor introduced to you. I hope you like it.