2013年10月18日 星期五

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

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

HTML 類似這樣
  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 就是這次的重點了。
  1. a{   
  2.     displayblock;   
  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-stylenone;   
  13.     padding10px;   
  14. }   
  15. .procedure-details {   
  16.     max-height100px;   
  17.     transition: .8s;   
  18.     overflowhidden;   
  19. }   
  20. .procedure-details.hidden {   
  21.     max-height0;   
  22. }  

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

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...