angular : nganimate : ngshow 原理，详解

这是我第一次写博客，请大家多多指教^^

拷贝试试

<!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>

View Code

简单介绍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。