javascript - 当 React 元素的文本更改时呈现 CSS 过渡

Question

这是我的代码库的片段 - https://codesandbox.io/s/transition-code-1wr5z

目前，通过更改类和 CSS 过渡，当加载并安装新的 Paragraph 组件时，文本会淡入。

但是，我希望在 Paragraph 组件中的 text 属性发生变化时也发生这种转换。

在生命周期更新或渲染中执行此操作只会触发无限更新循环。

不知道从这里该何去何从，因为我能找到的大多数讨论都是关于解决让文本在加载时淡入而不是在更新时淡入的功能。

Answer 1

这是片段解决方案

import React, { Component } from "react";
import "./Style.css";

class Paragraph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  componentDidMount() {
   setInterval(() => {
     this.fade();
   }, 1000); 
  }

  fade() {
    this.setState({ open: !this.state.open });
  }

  render() {
    const text = this.props.text;

    const classes = this.state.open ? "greenCls" : "redCls";

    return <div className={classes}>{text}</div>;
  }
}

export default Paragraph;

CSS 类

.redCls {
  background: red;
}
.greenCls {
  background: green;
}