如何在 React JS 中应用动画

Question

我正在使用 react-animated-css 库对 React JS 中的状态更改应用动画。

代码如下：

import ReactDOM from "react-dom";
import React, { Component } from "react";
import { Animated } from "react-animated-css";

const animationIn = "fadeInLeft";
const animationOut = "fadeOutLeft";
const animationDuration = 400; // in ms

const arr = [
  {
    id: 1,
    name: "Test"
  },
  {
    id: 2,
    name: "Test1"
  },
  {
    id: 3,
    name: "Test3"
  },
  {
    id: 4,
    name: "Test4"
  },
  {
    id: 5,
    name: "Test5"
  }
];

class Selection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selection: []
    };
    this.addSelection = this.addSelection.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addSelection(item) {
    const exists = this.state.selection.find(i => i.id === item.id);
    if (exists === undefined) {
      this.setState({ selection: [...this.state.selection, item] });
    }
  }

  removeItem(item) {
    this.setState({
      selection: this.state.selection.filter(i => i.id !== item.id)
    });
  }

  render() {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between"
        }}
      >
        <div>
          <h2>Choose from the list</h2>
          {arr.map(item => {
            return (
              <div
                key={item.id}
                style={{ marginBottom: 5, cursor: "pointer" }}
                onClick={() => this.addSelection(item)}
              >
                {item.name}
              </div>
            );
          })}
        </div>

        <div>
          <h1>Selection</h1>
          {this.state.selection.length < 1 ? (
            <div>Nothing selected</div>
          ) : (
            this.state.selection.map(l => {
              return (
                <Animated
                  key={l.name}
                  animationIn={animationIn}
                  animationOut={animationOut}
                  animationInDuration={animationDuration}
                  animationOutDuration={animationDuration}
                  isVisible={true}
                >
                  <div key={l.id} style={{ marginBottom: 5 }}>
                    {l.name}
                    <button
                      onClick={() => this.removeItem(l)}
                      style={{ marginLeft: 5, cursor: "pointer" }}
                    >
                      Remove
                    </button>
                  </div>
                </Animated>
              );
            })
          )}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Selection />, document.getElementById("root"));

当我点击左边的某个项目并将其添加到状态时它工作正常，但是当我删除它时它不起作用。

Here is the example on sandbox.

知道如何在从状态中删除项目时应用动画吗？

Answer 1

乍一看，您似乎删除了该项目的动画，这就是它不播放的原因。如果您将动画环绕整个选择列表，从您的 h1 下面开始，它会起作用吗？

Answer 2

您必须切换 isVisible 属性才能看到输出动画。如果组件被卸载，则无法动画出来。

Answer 3

您需要播放动画 props visible 的 state 并添加超时。

addSelection(item) {
    const exists = this.state.selection.find(i => i.id === item.id);
    if (exists === undefined) {
      this.setState({
        selection: [...this.state.selection, item],
        [`visibleAnimate${item.id}`]: true
      });
    }
  }

  removeItem(item) {
    this.setState(
      {
        [`visibleAnimate${item.id}`]: false
        // selection: this.state.selection.filter(i => i.id !== item.id)
      },
      () => {
        setTimeout(() => {
          this.setState({
            selection: this.state.selection.filter(i => i.id !== item.id)
          });
        }, 300);
      }
    );
  }

这里是sandbox demo.

如何在 React JS 中应用动画

How to apply animation in React JS

javascript

reactjs

react-animated