Css 在React应用程序中调用API后不透明度转换的时间

这里有一个有趣的问题。我的React应用程序有问题。 我有一个调用getRandomQuote（）的按钮。从api获取一行文本并将其传递到前端。我希望文本不透明度为0，然后在文本出现后变为1。相反，文本在被调用后显示，然后变为0不透明度，然后转换为不透明度1

getRandomQuote() {

    document.getElementById('quoteText').style.opacity = 0;

     axios.get('http://localhost:3100/quote').then(response => {

        console.log('1111111', response);

        this.setState( {quote: response.data[0].quote_text, quoteAuthor: response.data[0].author} );
        document.get
    document.getElementById('quoteText').style.opacity = 1;

      })
  }

index.css

.quoteText {
  opacity: 0;
  transition: opacity 1s ease-in-out;

}

.quoteAuthor {
  transition: 1s ease-in-out;

}

appContent.js

render() {
    return (
        <div className="app" style={ styles.appContent }>          
          <header>
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
          </header>
          {/* <ParticleContainer style ={styles.particleBackground}></ParticleContainer> */}
          <div style={ styles.aboveParticles }>
              <Title words="QUOTE MACHINE" style={styles.title}/>
              <div  style={ styles.quoteBox }>
                <h2 id="quoteText" className="quoteText"  style={styles.quoteText  }>{ this.state.quote }</h2>
                <h2 id="quoteAuthor" className="quoteAuthor" style={  styles.quoteAuthor }>{ this.state.quoteAuthor }</h2>
              </div>
              <button className ="button"  onClick={ ()=>{this.getRandomQuote(); this.changeBackgroundColor(); } } style={ styles.button }>Retrieve a Quote</button>
          </div>
        </div>
    );
  }

render（）{
返回(
{/*  */}
{this.state.quote}
{this.state.quoteAuthor}
{this.getRandomQuote（）；this.changeBackgroundColor（）；}}}style={style.button}>检索报价
);
}

您的描述不清楚。第一次单击后，文本将以不透明度0到1的形式显示，并以不透明度1到0的形式消失，然后在第二次单击后以不透明度0到1的形式显示

如果您的意思是希望文本在第二次单击后立即消失，则可以将getRandomQuote的第一行更改为

this.setState（{quote:'}）