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"
  };