ReactJS

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" />

没有'transition-property'！

我正在使用带有 Webpack 构建堆栈的 ReactJS，并且已经尝试过像 {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'

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

ReactJS - CSS: setting trasitionProperty in style object does not work

css

jsx