对状态变化做出反应动画

Question

状态改变时，元素根据当前数组切换位置。我想添加一个动画来显示交换发生的过渡是否有一种简单的方法可以做到这一点。

   const bubbleSort = async () => {
      let arr = test;
      for(let i=0;i<arr.length;i++){
        for(let j=0;j<arr.length-1-i;j++){
          setActiveIndex([j,j+1]);

           if(arr[j]>arr[j+1]){
              let temp = arr[j];
              arr[j] = arr[j+1];
              arr[j+1] = temp;

           }
           await sleep(1000);

           setTest([...arr]);
        }
        setSortedIndex(test.length-1-i);
      }

Answer 1

setState() 有一个可选参数，它是一个回调函数，它在状态变化时执行，您可以在那里执行所需的操作。

this.setState({
     currentMonth: +this.state.currentMonth + 1
    }, () => {
     //This is the call back function, perform the desired actions here.
    })
}