AngularJs学习笔记-第六章-动画(ngAnimate)

Angular动画执行过程:
图片描述

.class.ng-animate-class
支持ngAnimate的基本指令
ngShow
ngHide
ngIf
ngRepeat
ngView
ngClass
ngInclude
ngSwitch

怎样自定义动画

app.animation('.className',function(){//定义一个className
  return{
    'handle':function(element,className,done){
    //element:当前执行动画的节点元素
    //done:通知angular动画执行完毕
      jQuery(element).animate({
       'color':'red',
       'background':'red'
      },done)
      return function(cancelled){//cancelled:判断是否手动终端还是自动完成
        //callback
      }
    }
  }
})

demo

<!doctype html>
<html ng-app="app">
  <head>
    <title>demo</title>
    <meta Content-Type="html/text;charset=utf-8">
    <style>
      div{
        width:160px;
        height:160px;
        background:#b36ae2;
      }
      //.fade.ng-enter{opacity:0;}
      //.fade{transition:1s linear all;}
      //.fade.ng-enter.ng-enter-active{opacity:1;}
      //.fade.ng-leave{opacity:1;}
      //.fade.ng-leave.ng-leave-active{opacity:0;} 
    </style>
  </head>
  <body ng-controller="ctrl">
    <div ng-if="show" class="fade"></div>
    <button ng-click="show=!show">click</button>
  </body>
  <script src="framework/js/angular.min.js"></script>
  <script src="framework/js/angular-animate.js"></script>
  <script src="js/demo.js"></script>
</html>

js
var APP = angular.module('app',[])
    APP.controller('ctrl',['$scope',function($scope){

    }])

页面显示效果:
图片描述
Angular官方动画库:http://augus.github.io/ngAnimate/

AngularJs学习笔记-第六章-动画(ngAnimate)

MichaelDuan

引用和评论

OAuth2