你的位置:首页 > Java教程

[Java教程]AngularJS中实现显示或隐藏动画效果的3种方式


 

本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。

通过CSS方式实现显示/隐藏动画效果

思路:

→npm install angular-animage
→依赖:var app = angular.module("app",["ngAnimate"]);
→controller中一个变量接收bool值
→界面中提供一个按钮,点击改变bool值
→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定

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;}

 

通过animation方法实现显示/隐藏动画效果

 

app.animation("某个类名", function(){  return {    leave: function(element, done){        },    enter: function(element, done){        }  }})

 

animation可以在某个类名上加上leave,enter事件,leave和enter函数内部如何实现动画效果呢?可以通过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>

 

其中,npm install topcoat是一个很好的样式库。

使用direcive的方式实现显示/隐藏动画效果

是否可以在显示/隐藏的div部分加上一个属性,比如hide-me="app.isHidden",hide-me这个属性监控app.isHidden,根据值的变化情况再来决定是否显示。

 

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>