这是我第一次写博客，请大家多多指教^^
拷贝试试
<!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。
新闻热点
疑难解答
