ReactJS - CSS：在样式对象中设置 trasitionProperty 不起作用

Question

我目前正在使用基于属性更新的 CSS 转换来处理我的 React 组件中的动画，到目前为止一切都运行良好。

我现在遇到的问题是，我只需要转换我的组件之一上的一些 css 属性。当然，我尝试设置“transitionProperty”CSS 设置来完成此操作，但由于某种原因，React 根本没有设置此设置！

代码示例：

<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:

我在这里缺少什么？

Answer 1

转换的语法是：

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'