css - 我怎样才能在组件安装后应用样式但仍然遵守 CSS 转换？

Question

所以我正在尝试向我的 react 组件添加一些转换，但似乎无法让它在 ComponentDidMount() 中工作。如果我在 onClick 上应用了样式，例如height: 100%，它会尊重高度的过渡。但是，如果我更改 ComponentDidMount() 中的样式，它会立即应用。

例如这行得通:

render() {
    return (
        <div
            className="board"
            onClick={() => {this.element.style.opacity = 1}}>
        </div>
    )
}

但这不是(至少不是预期的那样):

componentDidMount() {
    this.element.style.opacity = 1;
}
render() {
    return (
        <div className="board"></div>
    )
}

这是样式:

.board {
    background: darkslateblue;
    display: inline-block;
    border-radius: 1rem;
    opacity: 0;
    margin: 2rem 0;
    padding: 4rem;
    transition: opacity 2s;
}

我希望能够遵循过渡，但它会在立即更改样式时忽略过渡。

Answer 1

尝试一下，这个工作正常，定义setInterval:

componentDidMount() {
    setInterval(() => {
      this.element.style.opacity = 1;
      this.element.style.width = "230px";
    },1)
  }