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

留言

張貼留言