javascript - 如何使用 React Material UI 的过渡组件动画将项目添加到列表？

Question

我有这个类。

class Demo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };

    this.add = this.add.bind(this);
    this.clear = this.clear.bind(this);
  }

  add() {
    this.setState(prev => {
      const n = prev.items.length;
      return {
        items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
      };
    });
  }

  clear() {
    this.setState({ items: [] });
  }

  render() {
    return (
      <div>
        <div>
          <button onClick={this.add}>Add</button>
          <button onClick={this.clear}>Clear</button>
        </div>

        {/* This is wrong, not sure what to do though... */}
        <Collapse in={this.state.items.length > 0}>
          <ul>{this.state.items}</ul>
        </Collapse>
      </div>
    );
  }
}

沙盒链接: https://codesandbox.io/s/material-demo-ggv04?file=/Demo.js
我正在努力做到这一点，以便每次单击“添加”按钮时，一个新项目会在列表顶部以动画方式存在，并且现有项目会被下推。不知道如何进行。
额外资源

我要达到的目标示例:https://codeburst.io/yet-another-to-do-list-app-this-time-with-react-transition-group-7d2d1cdf37fd

React 过渡组过渡文档:http://reactcommunity.org/react-transition-group/transition (似乎由 Collapse 内部使用)

Answer 1

我更新了你的沙盒代码来实现你想要的，但我不认为 MaterialUI 是最好的库(我可能会错过更好的方法)。
挑战在于，当您添加新项目时，DOM 中尚不存在该项目。并且大多数动画库/组件要求元素位于 DOM 中，它们只是“隐藏”和“显示”它并带有过渡时间。
我也遇到过类似的情况，经过一些研究，我发现可以处理 DOM 中尚未包含的元素动画的更好的库是 Framer Motion。 . (您可以查看他们的文档以获取 mount animations )
无论如何，这里是新的 Code Sandbox 的链接所以你可以看看。我所做的更改:
删除随 secret 钥
在 map使用 <Collapse /> 创建列表的函数组件，有一个函数可以获取一个随机整数并将其分配为 key到您的组件。 React 需要有一致的键才能正确地进行伪装，因此删除该随机数可以解决您的“切换”按钮没有正确动画的问题。 (如果您的项目列表没有唯一 ID，只需使用 map 函数的索引，这不是一个好的解决方案，但仍然比随机数更好)。

<Collapse key={i} timeout={this.state.collapseTimeout} in={this.state.open}>
    {it}
</Collapse>

添加了一个新功能来控制切换
这里的方法是:在列表中添加项目，在元素进入 DOM 之后，关闭 <Collapse /> ，稍等片刻，然后再次打开它(这样您就可以直观地看到动画)。为了做到这一点，我们需要一个新的“切换”函数，它可以显式设置折叠的值。

toggleValue(value) {
  this.setState(() => {
    return {
      open: value
    };
  });
}

为崩溃添加了可变超时
最后一个问题是，关闭 <Collapse />添加新项目时，正在触发动画以将其关闭。这里的解决方案是动态改变崩溃的超时时间，所以你看不到。

setCollapseTimeout(value) {
  this.setState(() => {
    return {
      collapseTimeout: value
    };
  });
}

将元素添加到列表时，等待触发动画
同样，要解决尚未在 DOM 中的元素的问题，我们需要使用 setTimeout或等待切换 <Collapse /> .已添加到您的 add() 中功能。

add() {
  this.toggleValue(false);
  this.setCollapseTimeout(0);
  this.setState(prev => {
    const n = prev.items.length;
    return {
      items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
    };
  });
  setTimeout(() => {
    this.setCollapseTimeout(300);
    this.toggleValue(true);
  }, 100);
}

同样，这是制作 <Collapse /> 的一个 hacky 解决方案来自 MaterialUI 的元素使用 DOM 中尚不存在的元素。但是，如前所述，还有其他更好的库。
祝你好运 :)