本篇体验在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

  
         
       
     Toggle Animation
     
      Some content here
     

 

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

  
         
     点我
     
     
      I'm too your to fade
     

 

其中，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

  
         
     Click to fade
     
      Fade me