Javascript React中的图像动画

我是一个新的反应，我已经写了纸牌游戏。现在我想制作它的动画。我想要一个自上而下的动画。我发现了这个问题，并在那里做了一些修改

moveDown = (item) => {
        console.log("ANIMATION1 STARTED")
        const listBottom = this.bottomList.offsetTop + this.bottomList.clientHeight;
        const itemTop =    - listBottom + this.topList.offsetTop;
        const { top, bottom, rear, bottom2, bottom3, transition } = this.state;
        transition.item = item;
        transition.startTop = itemTop / 5;
        transition.startAnim = false;
        this.setState({
            top: top.filter(x => x !== item),
            rear: [...rear, item],
            transition
        })
        setTimeout(() => this.resetState(), 0.1);
        console.log("ANIMATION1 ENDED")
    }

    resetState = () => {
        const { transition } = this.state;
        transition.startAnim = true;


        this.setState({ transition }, () => {
          console.log('setState finished')
        })

    }

我称之为

this.moveDown(this.state.top[0])

---

问题是，有时它会显示动画，有时它只是在没有动画的情况下到达最终位置。为什么会发生这种情况？

我看到的代码问题是，您正在直接改变状态。你不应该直接改变状态和道具。在向下移动功能中使用

prevState

，以更新状态。请从中阅读

更新程序

函数

类似地，在函数中，

resetState

中，它的状态也发生了变化。将其更改为：

  resetState = () => {
    this.setState(
      prevState => ({
        transition: { ...transition, startAnim: true }
      }),
      () => {
        console.log("setState finished");
      }
    );
  };

---

你能提供一个演示，分享一个codepen或codesandbox链接吗？

  resetState = () => {
    this.setState(
      prevState => ({
        transition: { ...transition, startAnim: true }
      }),
      () => {
        console.log("setState finished");
      }
    );
  };