ReactJS - CSS：在樣式對象中設置trasitionProperty不起作用

我目前正在使用基於屬性更新的css轉換來處理我的反應組件中的動畫，到目前爲止所有工作都很順利。ReactJS - CSS：在樣式對象中設置trasitionProperty不起作用

現在我遇到的問題是，我只需要在我的某個組件上轉換一些CSS屬性。當然，我試圖設置'transitionProperty'css設置來完成這一點，但由於某種原因，反應根本不會設置此設置！

代碼示例：

<div style={{ 
    color: 'red', 
    background-color: 'green', 
    transition: 'all 1s ease-out', 
    transitionProperty: 'color, background-color' 
}} />

它給我的結果是：

<div style="color:red; background-color:green; transition:all 1s ease-out" />

否 '過渡性質'！

我使用ReactJS，用的WebPack建立堆棧和已經嘗試過類似{WebkitTransitionProperty前綴：

缺少什麼我在這裏？

來源

2016-11-16 user2765977

嘗試使用'transitionDuration： '1'，transitionTimingFunction： '漸出'，transitionProperty：「色，背景color''。可能是'transition'和'transitionProperty'不能一起工作，或者是因爲你使用'transition：'all ...''。 – ArneHugo

另外我很驚訝'背景顏色'的作品，它應該是React中的'backgroundColor'。 – ArneHugo

第二個代碼框是您在瀏覽器中獲得的結果，因此：background-color – user2765977

過渡的語法是：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

所以你可以寫：

transition: 'color 1s ease-out, background-color 1s ease-out'

更重要的是transitionProperty是語法的JavaScript，例如：

document.getElementById("myDIV").style.transitionProperty = "width,height";

在CSS，你應該使用transition-property：

transition-property: 'color, background-color'

來源

2016-11-16 11:30:54 Arkej

Thanx爲我解決了這個問題。但我仍然想知道爲什麼反應正在踢出'過渡財產'的CSS設置。 – user2765977

ReactJS - CSS：在樣式對象中設置trasitionProperty不起作用

回答

相關問題