React：如何将 css 过渡添加到内联样式

Question

I would like to have a button, after clicked, state isBackward become true and the inline-style would be added into the div container and have animation.

I have tried below code in React, only transition doesn't work, other properties work. Anyone got the idea to have the transition for the marginLeft to have animation?

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

I think you must write as follows:

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