React / React Spring 列出动画不工作

Question

我正在尝试 react-spring 尝试使用 <Transition> 组件在 mount/unmount 上的组件列表上应用动画。动画在挂载时按预期发生，但在卸载时根本不会发生——移除的组件似乎立即卸载而没有动画。

我怀疑我误解了 keys 的工作方式，因为它似乎是我的代码与示例中唯一不同的地方——我使用的是 id 属性从每个对象一个数组。我的假设是，它与 React 内置的 key 用于组件列表的相同，只是一次性全部通过。我试过使用 Transition 的 items 参数传递数据数组并将 key 设置为一个函数，但它只是以不同的方式出现故障。

我在这里设置了一个简单的演示，我在其中制作了一个列表并设置了超时以在 3 秒后删除第一项 - 这是代码：

import React, { Component } from "react";
import { animated, config, Transition } from "react-spring";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
          id: 1,
          text: "This is item 1"
        },
        {
          id: 2,
          text: "This is item 2"
        },
        {
          id: 3,
          text: "This is item 3"
        }
      ]
    };
  }

  componentDidMount() {
    const { items } = this.state;
    setTimeout(() => {
      this.setState({
        items: items.slice(1)
      });
    }, 3000);
  }

  render() {
    const { items } = this.state;

    return (
      <div className="App">
        <ul>
          <Transition
            native
            keys={items.map(item => item.id)}
            config={config.slow}
            from={{ opacity: 0 }}
            to={{ opacity: 1 }}
          >
            {items.map(item => styles => {
              return <animated.li style={styles}>{item.text}</animated.li>;
            })}
          </Transition>
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我在此处的 CodeSandbox 上运行：https://codesandbox.io/s/r5n8v3x85q

我是不是漏掉了什么？

Answer 1

我用下面的代码让它工作。您缺少 Transition 组件上的 "leave" 属性。您还可以为 Transition 组件中的属性传入 "transition"，它会给您带来更好看的动画效果。

import React, { Component } from "react";
import { animated, config, Transition } from "react-spring";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
          id: 1,
          text: "This is item 1"
        },
        {
          id: 2,
          text: "This is item 2"
        },
        {
          id: 3,
          text: "This is item 3"
        }
      ]
    };
  }

  componentDidMount() {
    const { items } = this.state;
    setTimeout(() => {
      this.setState({
        items: items.slice(1)
      });
    }, 3000);
  }

  render() {
    const { items } = this.state;

    return (
      <div className="App">
      <button onClick={() => this.setState({items: []})}>Remove List items</button> 
        <ul>
          <Transition
            native
            keys={items.map(item => item.id)}
            config={config.slow}
            from={{ opacity: 0, transition: "opacity .25s ease"  }}
            to={{ opacity: 1, transition: "opacity .25s ease"  }}
            leave={{ opacity: 0, transition: "opacity .25s ease" }}
          >
            {items.map(item => styles => {
              return <animated.li style={styles}>{item.text}</animated.li>;
            })}
          </Transition>
        </ul>
      </div>
    );
  }
}

React / React Spring 列出动画不工作

React / React Spring List Animate Out Not Working

reactjs

react-spring