React / React Spring List Animate Out не работает

Question

Я экспериментирую с react-spring пытается применить анимацию к списку компонентов при монтировании / размонтировании, используя <Transition> составная часть. Анимация происходит, как и ожидалось, при монтировании, но совсем не происходит при отключении - удаленные компоненты, по-видимому, немедленно отключаются без анимации.

Я подозреваю, что я неправильно понимаю, как keys работать, как кажется, единственное, что отличается в моем коде от примеров - я использую id Свойство от каждого объекта массив. Я предполагаю, что это то же самое, что встроенный в React key используется для списков компонентов, просто передается все сразу. Я попытался передать массив данных, используя Transition "s 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

Я получил это работает со следующим кодом. Вам не хватало свойства "оставить" в компоненте Переход. Также вы можете перейти в "переход" для свойств в компоненте "Переход", это даст вам намного приятнее выглядящие анимации.

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>
    );
  }
}