最近在看算法分析，那个大O啊，小o啊，分治法啊（目前就看到这里），真是搞死了。这回呢休息一下，学学AngularJS动画，上一篇文章根据自由男人的书简单谈到了动画的话题，发现反响很大（好吧，我说慌了，那篇文章的动画谈得太简单了），今天来看看官方文档。嗯，边看边写。 一、安装 ...
最近在看算法分析，那个大O啊，小o啊，分治法啊（目前就看到这里），真是搞死了。这回呢休息一下，学学AngularJS动画，上一篇文章根据自由男人的书简单谈到了动画的话题，发现反响很大（好吧，我说慌了，那篇文章的动画谈得太简单了），今天来看看官方文档。嗯，边看边写。
一、安装
这个应该都知道了，和其他的扩展模块安装相同。这里为了文章完整性简单提一下。文档给到了获取动画扩展angular-animate.js的多种方式。
1、cdn，自己去查
2、npm install --save angular-animate@X.Y.Z
3、bower install angular-animate#X.Y.Z
拿到这个文件后需要引入到我们要应用动画的页面，添加依赖ngAnimate。
二、使用
动画的使用方式有两种，一是CSS，二是通过javascript。前者是通过纯粹的css来实现动画，后者通过脚本触发动画。两者都需要用到Angrular提供的一些特殊的类。
1、支持动画的指令
最后两个指令属于一个扩展模块ngMessages，为了集中火力搞动画，先不管。
2、基于CSS的动画
CSS动画的特殊性在于你不需要写一行javascript就可以创建出炫酷的动画，这让我想到了Bootstrap，她只要在html元素上添加一些特定的属性就可以实现一些动画。Angularjs基于CSS实现动画的原理很简单，即，如果你为某个指令加上了一些类比如fade，而你在样式表中这样写.fade.ng-leave，这样如果元素没有ng-leave这个类，你加的fade的样式就不会被运用，但是Angularjs会监视我们的指令，当检测到指令进入某种状态时就会添加相应的类，从而你的样式就会被使用了，如此，动画就触发了。下面给个例子
<!DOCTYPE html><html lang="en" ng-app='myApp'><head> <meta charset="UTF-8"> <title>animate</title> <style type="text/css"> #div{ width: 300px; height: 300px; background:red; } .ani.ng-hide{ transition: 6s linear all; opacity: 0; background: blue; } </style></head><body> <div ng-controller='animateCtrl'> <div id="div" class="ani" ng-show='show'></div> <button ng-click='clickHandler()'>change</button> </div> <script type="text/javascript" src='/images/loading.gif' data-original="../node_modules/angular/angular.min.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="../node_modules/angular-animate/angular-animate.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",['ngAnimate']); myApp.controller("animateCtrl",function($scope){ $scope.show = true; $scope.clickHandler = function(){ $scope.show = !$scope.show; } }) </script></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：AngularJS1.X学习笔记14
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
