angular : ng-animate : ng-show 原理，詳解

時間 2019-11-17

原文原文鏈接

這是我第一次寫博客，請你們多多指教^^html

拷貝試試angularjs

<!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，經過一個表達式完成動做。web

當angular開始compile時，會發現ng-show裏的表達式是undefind，相等於false，這回angular會自動給一個class叫ng-hide。這ng-hide會給elem display：none。點擊按鈕show，會給expression換成true，這回把ng-hide給拿掉，elem就會看見了。以此類推～ajax

怎樣能夠完成更多的animation？express

#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時，自動添加api

過程：當點擊按鈕show，當下給關注的elem會去除ng-hide，同時補上3個class 「ng-animate」，「ng-hide-remove」，「ng-hide-remove-active」。app

animate須要2秒完成，2秒後elem會去除以前所給的class。若是如今點擊hide，angular會自動加ng-animate，ng-hide-add，ng-hide-add-active。ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。