Angularjs is a set of rich frameworks for creating single-page Web applications that bring all the required functionality to build rich, interactive applications. One of the main features is that angular brings support for animations.
This experience adds animation to the 2 state transitions between show/hide in Angularjs.
Show/Hide animation effects through CSS
Ideas:
→NPM Install Angular-animage
→ dependencies: var app = Angular.module ("app", ["nganimate"]);
A variable in →controller receives a bool value
→ Interface to provide a button, click to change the bool value
→ The area shown/hidden in the interface provides the binding of bool values in NG-IF and controller
App.js
var app = Angular.module ("app", ["nganimate"]);
App.controller ("Appctrl", function () {
this.toggle = true;
})
Index.html
<! DOCTYPE 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;
Show/Hide animation effects by animation method
App.animation ("A class name", function () {return
{
leave:function (element, done) {
},
enter:function ( element, done) {
}
}
Animation can add Leave,enter event to a class name, how to animate inside leave and enter function? Can be implemented by 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>
Among them, npm install topcoat is a good gallery of styles.
Show/Hide animation effects using direcive
Whether you can add a property to the div section shown/hidden, such as hide-me= "App.ishidden", hide-me this property to monitor the App.ishidden, and then decide whether to display it according to the change in the 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 small series to introduce the ANGULARJS in the realization of the display or hidden animation effect of the way summary, I hope you like.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
