javascript - React 中的图片动画

Question

我是新手，我已经写了纸牌游戏。现在我想制作它的动画。我想要一个从上到下的动画。我发现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])

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

标签： javascriptreactjsreact-native

Answer 1

我在代码中看到的问题是您直接改变了状态。你不应该直接改变状态和道具。prevState在 moveDown 函数中使用以更新状态。请阅读react docsupdater中的功能

this.setState(prevState => {
    const { top, rear, transition } = prevState;
    return {
      top: top.filter(x => x !== item),
      rear: [...rear, item],
      transition: {
        ...transition,
        item,
        startTop: itemTop / 5,
        startAnim: false
      }
    };
  });

同样，在您resetState的功能中，它正在变异的状态。将其更改为：

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