1

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

我怀疑我误解了keys工作原理，因为它似乎是我的代码与示例中唯一不同的地方——我使用id每个对象的属性一个数组。key我的假设是它与用于组件列表的React 内置相同，只是一次通过。我尝试使用Transition'sitems参数传递数据数组并将其设置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

我错过了什么吗？

4

1 回答 1

0

我让它使用以下代码。您缺少 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>
    );
  }
}
于 2018-08-12T22:30:09.163 回答