Question

这是我的代码段的摘要-https://www.django-rest-framework.org/api-guide/permissions/

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

但是，我希望当Paragraph组件中的text prop更改时也会发生这种过渡。

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

由于我能找到的大多数讨论都围绕着解决使文本在加载时淡入而不是在更新时淡入淡出的功能，因此不确定从何处去。

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

Answer 2

请尝试使用setTimeout修复此问题

https://codesandbox.io/s/transition-code-fgmyq

当React元素的文本改变时渲染CSS过渡

2 个答案: