css3 - react 组件设置的 transform 无效

Question

JSX:
style={this.state.expand == index ? {transform: 'rotate(180deg)', backgroundColor: 'black'} : null}

有背景色效果，无旋转样式（chrome）
假如写在样式表上，class没有动态更新的可以有样式
会是组件生命周期问题？

补充的图片@michael_cai
@michael_cai:
我换了一种方式，写在行间也是不行，浏览器显示的样式表上也有

Answer 1

This has nothing to do with react.

You will know if the style sheet of the element you are operating contains the style you want.

In fact, what you are doing here is simply adding a class to the dom element. As long as the dom element has this class, it means that your react writing method is fine. It may only be a style problem.

Answer 2

It really has nothing to do with react,

It’s just because your attribute is missing transition, an important attribute of css3 animation.

transition: all 2s ease;
语法
transition: property duration timing-function delay;
           属性的名称 时长  动画方法 延迟

Document portal: http://www.w3school.com.cn/cs...

Answer 3

Later I found out that transform is not valid on inline elements. Thank you for your answers!