API呼び出し後の不透明遷移のタイミングは、React App

Question

です。興味深い問題があります。私のリアクションアプリに問題があります。 私は、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; 

     }) 
    } 

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

} 

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

} 

index.css 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で消え、2回目のクリック後に不透明度0〜1で表示されます。

あなたはテキストが2回目のクリックの後にすぐに消えたい意味ならば、あなたは

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

にgetRandomQuoteの最初の行を変更することができます