Angular ng-class 製作動畫 DOM 的出現/消失效果

最近在研究用 Angular 做動畫，看了一下就是搭配 CSS 的 transition ，這樣只要換 css 就會有動畫了。

HTML 類似這樣

view plaincopy to clipboardprint

1. <a ng-click="showDetails = ! showDetails">{{procedure.definition}}</a>   
2. <div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">   
3.     <p>content</p>   
4. </div>  

主要是在 ng-click="showDetails = ! showDetails" 的時候切換 class ，要切換的 class 類似 ng-class="{ 'hidden': ! showDetails }" 放在DOM裡。

CSS 就是這次的重點了。

view plaincopy to clipboardprint

1. a{   
2.     display: block;   
3.     width:100px;   
4.     color:#fff;   
5.     background:#d41b3a;   
6.     border-radius:4px;   
7.     text-align:center;   
8.     text-decoration:none;   
9.     padding:4px 10px;   
10. }   
11. li {       
12.     list-style: none;   
13.     padding: 10px;   
14. }   
15. .procedure-details {   
16.     max-height: 100px;   
17.     transition: .8s;   
18.     overflow: hidden;   
19. }   
20. .procedure-details.hidden {   
21.     max-height: 0;   
22. }  

要注意的是因為是做垂直的切換，所以控制 height 就可以了，但有遇到問題是只用 height 的話不會有動畫效果，要在前後都使用 max-height 設定高度，隱藏的時候設 0 ，要展現的時候只要設定 max-height 比展開後的 height 還高就可以了，這樣動畫效果就會正常了。

Demo