angular : ng-animate : ng-show 原理，详解
这是我第一次写博客，请大家多多指教^^
拷贝试试
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>思涂客 Stooges</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.js"></script>
<script>
angular.module('app',['ngAnimate']).
controller('ctrl', ['$scope', function ($scope) {
$scope.showButton = function () {
$scope.expression = true;
}
$scope.hideButton = function () {
$scope.expression = false;
}
}])
</script>
<style>
#animate{ background-color:red;-webkit-transition:all linear 2s; transition:all linear 2s; opacity:1;}
#animate.ng-hide{ opacity:0;}
/*一下会慢慢解释*/
#animate.ng-hide { }
#animate.ng-hide-add { }
#animate.ng-hide-add.ng-hide-add-active { }
#animate.ng-hide-remove { }
#animate.ng-hide-remove.ng-hide-remove-active { }
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-click="showButton()">show</button>
<button ng-click="hideButton()">hide</button>
<div id="animate" ng-show="expression">"思涂客"</div>
</body>
</html>
简单介绍ng-show：通常使用在需要show/hide的elem，通过一个表达式完成动作。
当angular开始compile时，会发现ng-show里的表达式是undefind，相等于false，这回angular会自动给一个class叫ng-hide。这ng-hide会给elem display：none。点击按钮show，会给expression换成true，这回把ng-hide给拿掉，elem就会看见了。以此类推～
怎样可以完成更多的animation？
#animate.ng-hide { } //当ng-show=“false”时，自动添加
#animate.ng-hide-add { } //当点击hide时，自动添加
#animate.ng-hide-add.ng-hide-add-active { } //当点击hide时，自动添加
#animate.ng-hide-remove { } //当点击show时，自动添加
#animate.ng-hide-remove.ng-hide-remove-active { } //当点击show时，自动添加
过程：当点击按钮show，当下给关注的elem会去除ng-hide，同时补上3个class “ng-animate”，“ng-hide-remove”，“ng-hide-remove-active”。
animate需要2秒完成，2秒后elem会去除之前所给的class。如果现在点击hide，angular会自动加ng-animate，ng-hide-add，ng-hide-add-active。
