如何通过反应组过渡为文档背景色变化设置动画？

问题描述

我想使用React组转换为文档背景颜色变化设置动画，但是我不知道如何做。你能给我个主意吗？我在这里从codepen.io添加了我的代码。您还可以在这里找到它：https://codepen.io/BogosRoro/pen/bGprRzp?editors=0010（如果要查看其运行方式）。如果您能给我一些有关我的代码质量的反馈，我也将不胜感激；我正在自学编码，任何反馈都对我有帮助。谢谢！

const Csstransition = ReactTransitionGroup.Csstransition;
function App() {
  return (
    <div>
      <Quote />
    </div>
  );
}

class Quote extends React.Component {
  constructor() {
    super();
    this.state = {
      quote: [],author: [],apiData:[],color: "#A951E3",BoxTransition: true
    };
    this.handleClick = this.handleClick.bind(this)
    this.toogle = this.toogle.bind(this)
  }
  toogle(){
    this.setState((prev) => ({
      BoxTransition: !prev.BoxTransition
    }))
  }
  
  componentDidMount() {
    fetch("https://type.fit/api/quotes")
      .then(response => response.json())
      .then(data => {
        this.setState({ quote: data[1].text,author: data[1].author,apiData: data
                      });
      });
  }
  
  handleClick(){
    var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    function getRandNum(min,max){
      return Math.floor(Math.random()*(max-min)+min)
    }
    let randomNum = getRandNum(0,this.state.apiData.length)
    this.setState({
      quote: this.state.apiData[randomNum].text,author: this.state.apiData[randomNum].author,color: randomColor
    }) 
    console.log(this.state.BoxTransition)
    document.body.style.backgroundColor = randomColor;
    this.toogle();
  }
  
  render() {   
    return (
      <div class="quote-Box">
        <Csstransition
          in={this.state.BoxTransition}
          timeout={3000}
          classNames={"Box-transition"}>
        <h1 style={{color: this.state.color}} >{this.state.quote}-"{this.state.author}"</h1>
          </Csstransition>
        <button onClick={this.handleClick} class="change-button" style={{color: "white",backgroundColor: this.state.color}}>Change</button>
        
      </div>
    );
  }
}

ReactDOM.render(<App />,document.getElementById("root"));

html {
  font-size: 9px;
}
body {
  text-align: center;
  font-family: sans-serif;
  background-color: #A951E3;
}

.quote-Box {
  background-color: white;
  border-radius: 2%;
  padding: 8rem;
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  font-size: 10px;
}
.change-button {
  float: right;
  margin-bottom: 5%;
  padding: 10px;
}

.change-button:hover {
  opacity: 0.6;
  transition: 0.6s;
}



.Box-transition-exit {
  opacity: 0;
}

.Box-transition-exit-active {
  opacity: 1;
  transition: opacity 3s;
}

.Box-transition-exit-done {
  opacity: 1;
}

.Box-transition-enter {
  opacity: 0;
}

.Box-transition-enter-active {
  opacity: 1;
  transition: opacity 3s;
}

.Box-transition-enter-done {
  opacity: 1;
}

<html>
<div id="root">
</div>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-transition-group reactjs reactjs reactjs reactjs