React:如何将css转换添加到内联样式中

Question

我想要一个按钮，点击后，状态isBackward变为true，内联样式将添加到div容器中并具有动画。

我在React中尝试过以下代码，只有转换不起作用，其他属性也起作用。有人想过让marginLeft有动画的过渡吗？

const slideStyle = {
width: 400 + "%",
marginLeft: dis + "px",
transition: "marginLeft 1s"
};
<div style={isBackward ? slideStyle : null} className="quote-box-wrap">
{quotes.map((item, index) => (
<Quote
key={index}
id={index}
content={item.sentence}
author={item.author}
/>
))}
</div>

Answer 1

我认为你必须写如下：

const slideStyle = {
width: 400 + "%",
marginLeft: dis + "px",
transition: "margin-left 1s"
};