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

Posted

技术标签:

【中文标题】ReactJS - CSS:在样式对象中设置 trasitionProperty 不起作用【英文标题】:ReactJS - CSS: setting trasitionProperty in style object does not work 【发布时间】:2017-03-30 13:49:59 【问题描述】:

我目前正在使用基于属性更新的 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" />

没有“过渡属性”!

我正在使用带有 Webpack 构建堆栈的 ReactJS,并且已经尝试过像 WebkitTransitionProperty:

这样的前缀

我在这里错过了什么?

【问题讨论】:

尝试使用transitionDuration: '1s', transitionTimingFunction: 'ease-out', transitionProperty: 'color, background-color'。可能是transitiontransitionProperty 不能一起使用,也可能是因为你使用了transition: 'all ...' 我也很惊讶 background-color 工作,它应该是 backgroundColor 在 React 中。 第二个代码框是你在浏览器中得到的结果,因此:background-color 是的,我认为它是生成的 DOM 元素。我指的是style=... 中的background-color,它应该是backgroundColor 以作为有效的JS 对象属性名称并符合React 内联样式属性命名。 5 年后...我仍然遇到这个原始问题。接受的答案有效,但我很想知道为什么这不起作用。这是一个反应错误吗? 【参考方案1】:

转换的语法是:

transition: &lt;property&gt; || &lt;duration&gt; || &lt;timing-function&gt; || &lt;delay&gt; [, ...];

所以你可以写:

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

还有transitionPropertyjavascript的语法,例如:

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

在 CSS 中你应该使用 transition-property

transition-property: 'color, background-color'

【讨论】:

谢谢这解决了我的问题。但我仍然想知道为什么 react 会踢出“transition-property”css 设置。

以上是关于ReactJS - CSS:在样式对象中设置 trasitionProperty 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何使用类对象在 Reactjs 中设置功能性无状态组件的样式

在 Reactjs 中使用样式化组件而不是 CSS 模块有啥好处 [关闭]

如何使用样式化组件在 reactjs 中设置 svg 样式

如何使用外部 css 在 Reactjs 中设置背景图像?

如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?

具有内联样式的关键帧 ReactJS