添加淡出的动画效果，单击事件后反应以更改背景颜色

Question

我正在freecodecamp上做一个名为随机报价机的简单项目，我已经完成了但是，我想知道如何在点击按钮后添加淡出的动画效果来更改背景和字体颜色(实际上这个链接显示了我想要的项目效果(。这是我迄今为止所写内容的链接。

var colorsForBackground = [
'#16a085',
'#27ae60',
'#2c3e50',
'#f39c12',
'#e74c3c',
'#9b59b6',
'#FB6964',
'#342224',
'#472E32',
'#BDBB99',
'#77B1A9',
'#73A857'
];
class App extends React.Component {
constructor() {
super();
this.state = {
quote: "",
author: "",
color:'#16a085',
};
this.handleClick=this.handleClick.bind(this)
}
handleClick(){
fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
.then(response=>response.json())
.then(data=>{
const randomIndex=Math.floor(Math.random()*data.quotes.length)
const randomIndexForColor=Math.floor(Math.random()*colorsForBackground.length)
this.setState({
quote:data.quotes[randomIndex].quote,
author:data.quotes[randomIndex].author,
color:colorsForBackground[randomIndexForColor]
})})
}
render() {
const tweetHref=`https://twitter.com/intent/tweet?text=${this.state.quote}-${this.state.author}&hashtags=quotes`
return (
<div id="gird-container" style={{backgroundColor:this.state.color}}>
<div id="quote-box" className="container">
<div id="text">{this.state.quote}</div>
<div id="author" style={{color:this.state.color}}>{this.state.author}</div>
<div className="flexContainer">
<a id="tweet-quote" href={tweetHref} target="blank_"><i id="tweetIcon" className="fab fa-twitter-square fa-3x"style={{color:this.state.color}}></i></a>                 
<button id="new-quote" onClick={this.handleClick} style={{backgroundColor:this.state.color}}>New quote</button>

</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));

Answer 1

您需要在#gird-container中添加transition属性。您可以根据需要更改transition-duration。为了演示的目的，我把它设置为1秒。

transition: background-color 1s ease;

在此处进行演示：https://codepen.io/priyank_kachhela/pen/YzZVNwR

有关transition属性的更多信息，您可以点击此链接