1
흥미로운 문제가 있습니다. 내 반응 앱에 문제가 있습니다. getRandomQuote()를 호출하는 버튼이 있습니다. API에서 텍스트 줄을 가져 와서 프런트 엔드에 전달합니다. 텍스트 불투명도를 0으로 설정하고 텍스트가 표시된 후 1로 설정합니다. 호출 후 대신, 텍스트, 다음 1React App에서 API 호출 후 불투명 전환의 타이밍
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는 불투명로 전환, 0 불투명으로 변 나타납니다
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>
);
}