在 React App 中调用 API 后不透明度转换的时间

Question

这是一个有趣的问题。我的 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>
    );
  }

Answer 1

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

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

this.setState({quote: ''});

在 React App 中调用 API 后不透明度转换的时间

The timing of opacity transitions after API call in React App

css

reactjs