Dojo：animateProperty for「display」

Question

我試圖使用Dojo和dojo/_base/fx動畫CSS「display」屬性的更改。

這裏是我的代碼：

function invert_display(id) { 
    var element = dom.byId(id), 
     currDisplay = style.get(element, 'display'), 
     nextDisplay = currDisplay === 'block' ? 'none' : 'block'; 
    baseFx.animateProperty({ 
     node: id, 
     properties: { 
      display: 'none', 
      backgroundColor: '#f00' 
     } 
    }).play(); 
} 

一切似乎都做工精細，模塊正確導入（AMD風格），變量值是有效的，在div背景顏色變爲紅色，但股利不會淡出（「顯示」屬性設置爲「無」）。

謝謝你提前！

Answer 1

display樣式不能真正動畫，因爲它沒有none和可見狀態（block,inline等）之間的任何中間值。

爲了讓它淡入/淡出，您需要動畫opacity樣式（Dojo的基底fx實際上已經有functions for this）。既然你也想動畫的顏色，你可以，例如，你可以改變你的函數成類似：

function invert_display(id) { 
    var element = dom.byId(id), 
     opacity = style.get(element, 'opacity'); 

    baseFx.animateProperty({ 
     node: id, 
     properties: { 
      opacity: opacity<1 ? 1 : 0, 
      backgroundColor: opacity<1 ? '#00f' : '#f00' 
     } 
    }).play(); 
} 

現在，不透明度設置爲0，不刪除元素，它只是使其透明。如果您想要優雅地刪除它，也可以將height: opacity<1 ? 42 : 0添加到動畫中，使其在衰落時「最小化」。或者，您可以使用onEnd和onBegin函數在動畫完成/開始時設置display樣式（儘管這看起來並不總是很優雅）。

此處爲示例：http://jsbin.com/aqigoj/1/edit