調用 function 后如何設置延時？

Question

我有一個 function 隨機改變頁面背景的反應。 但我希望背景顏色淡化為下一個隨機顏色，所以我在下面嘗試。

class App extends Component {
constructor(props) {
super(props);
this.state = {
  quotes: [],
  selectedQuoteIndex: null,
  background: 'green'
}

changeBackground() {
let background = "#" + ((1<<24)*Math.random() | 0).toString(16);
this.setState({background});
}, 2000;

assignNewQuoteIndex() {
this.setState({ selectedQuoteIndex: this.generateNewQuoteIndex() });
 }

backgroundQuoteChange(){
this.assignNewQuoteIndex();
this.changeBackground();
}

render() {
return (
  <div style={{
    width: '100vw',
    height: '100vh',
    backgroundColor: this.state.background
  }}>

<Button id="new-quote" 
 size={'small'} 
 onClick={backgroundQuoteChange}>Next Color & Quote
</Button>
 )

我在具有 onClick 的按鈕上使用此 function。 不工作：/

Answer 1

只需在相應的 div 上設置一個具有 1 秒延遲和緩入出時序 function 的轉換。

transition: background-color ease-in-out 1s;

這是一個沙盒： https://codesandbox.io/s/elegant-franklin-d6z99

在進入框架之前，我強烈建議您先掌握 HTML、CSS 和 JS 的基礎知識。 你肯定需要在那里做一些工作。

Answer 2

您可以簡單地使用 css 轉換

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
      selectedQuoteIndex: null,
      background: "green"
    };
  }

  changeBackground = () => {
    let background = "#" + (((1 << 24) * Math.random()) | 0).toString(16);
    this.setState({ background });
  };

  render() {
    return (
     <>
       <div
         style={{
           width: "100vw",
           height: "100vh",
           transition: "background-color 1s",
           backgroundColor: this.state.background
         }}
       />

       <button type="button" onClick={this.changeBackground}>
         Next Color & quote
       </button>
     </>
   );
  }
}

這是stackblitz上的一個例子