Home > Article > Web Front-end > Summary of ways to implement show or hide animation effects in AngularJS_AngularJS
AngularJS is a set of rich frameworks for creating single-page web applications, bringing all the features needed to build rich and interactive applications. One of the major features is that Angular brings support for animations.
This experience uses AngularJS to add animation effects between the two states of "show/hide".
Realize show/hide animation effect through CSS
Things:
→npm install angular-animage
→Dependency: var app = angular.module("app",["ngAnimate"]);
→A variable in the controller receives a bool value
→A button is provided in the interface, click to change the bool value
→The displayed/hidden area in the interface provides ng-if and bool value binding in the controller
app.js
var app = angular.module("app",["ngAnimate"]); app.controller("AppCtrl", function(){ this.toggle = true; })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="styles.css"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button class="btn" ng-click="app.toggle=!app.toggle">Toggle Animation</button> <div class="toggle" ng-if="app.toggle">Some content here</div> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app.js"></script> </body> </html>
styes.css
.toggle{ -webkit-transition: linear 1s; -moz-transition: linear 1s; -ms-transition: linear 1s; -o-transition: linear 1s; transition: linear 1s; } .toggle.ng-enter{ opacity: 0; } .toggle.ng-enter-active{ opacity: 1; } .toggle.ng-leave{ opacity: 1; } .toggle.ng-leave-active{ opacity: 0; }
Realize show/hide animation effect through animation method
app.animation("某个类名", function(){ return { leave: function(element, done){ }, enter: function(element, done){ } } })
Animation can add leave and enter events to a certain class name. How to achieve animation effects inside the leave and enter functions? This can be achieved through TweenMax.min.js.
app1.js
ar app = angular.module("app",["ngAnimate"]); app.controller("AppCtrl", function(){ this.toggle = true; }) app.animation(".toggle", function(){ return { leave: function(element, done){ //element.text("nooooo"); TweenMax.to(element, 1, {opacity:0, onComplete:done}) }, enter: function(element, done){ TweenMax.from(element, 1, {opacity:0, onComplete:done}) } } })
index1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/> </head> <body class="well-lg" ng-app="app" ng-controller="AppCtrl as app"> <button class="topcoat-button--large--cta" ng-click="app.toggle = !app.toggle">点我</button> <hr/> <div class="topcoat-notification toggle" ng-if="app.toggle">I'm too your to fade</div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app1.js"></script> </body> </html>
Among them, npm install topcoat is a good style library.
Use direcive to achieve show/hide animation effect
Is it possible to add an attribute to the displayed/hidden div part, such as hide-me="app.isHidden"? The hide-me attribute monitors app.isHidden and decides whether to display it based on the change in value.
app3.js
var app=angular.module('app',["ngAnimate"]); app.controller("AppCtrl", function(){ this.isHidden = false; this.fadeIt = function(){ //TweenMax.to($("#my-badge"), 1, {opacity:0}) this.isHidden = !this.isHidden; } }) app.directive("hideMe", function($animate){ return function(scope, element, attrs){ scope.$watch(attrs.hideMe, function(newVal){ if(newVal){ //TweenMax.to(element, 1, {opacity:0}); $animate.addClass(element, "fade"); } else{ $animate.removeClass(element, "fade"); } }) } }) app.animation(".fade", function(){ return { addClass: function(element, className){ TweenMax.to(element, 1, {opacity:0}); }, removeClass: function(element, className){ TweenMax.to(element, 1, {opacity:1}); } } })
index3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button> <div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div> <script src="../node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app3.js"></script> </body> </html>
The above content is a summary of the ways to show or hide animation effects in AngularJS introduced by the editor. I hope you like it.