2017-07-18 173 views
0

我想通過如何做一個初始狀態的角度動畫進行排序。我試圖建立一個幻燈片向上/向下動畫,迄今有:初始狀態/之後的狀態

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      // display: 'block', 
      height: '*' 
     })), 
     transition('* <=> *', [ 
      style({ 
       display: 'block' 
      }), 
      animate('.5s ease') 
     ]) 
    ] 
) 

在jQuery的版本,有問題的元素上有display: none,我注意到,jQuery的滑開,然後我看到display: block在最後的元素。

當我有display: 'block'註釋如上所述,但它的工作原理如下,但是,當頁面加載時,它從元素從全高到無(這是有道理的我猜?),這是奇怪的用戶。

我想弄清楚如何設置它,所以當關閉時,首先它會去display: block,運行高度動畫,並保持塊。在另一個方向,我想阻止,直到完成,增加一個display: none

我已經嘗試添加一個顯示沒有類,但作爲動畫不添加一個類之前/之後,它沒有像預期的那樣工作。我懷疑這應該是Angular動畫JS和CSS類的組合,但我無法弄清楚這種模式。如何解決這個問題的任何建議都會很好。

回答

0

我認爲你需要兩個轉換來獲得你想要的。

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      height: '*' 
     })), 
     transition('closed => open', [style({ display: none }), animate('.5s ease')]), 
     transition('open => closed', [style({ display: 'block' }), animate('.5s ease')]) 
    ] 
) 
+0

我其實不想中介風格永遠是沒有的,但實際上我注意到,我不能讓中介樣式適用於:https://plnkr.co/edit/7c23w3GNeYAPlGl6KUgB(如果您在製作動畫時檢查盒子,則永遠不會應用任何中間形式)。 – RhoVisions