等待一个 React CSS 动画结束，然后再开始另一个

Question

我正在使用 React 和 CSSTransitionGroup 组件在我的应用状态中的两组 members 之间切换。它的状态包含 members，每个状态都有一个标志来表明它们是否是 not 的真正成员。它还包含一个标志，用于跟踪我们正在查看的成员类型：

this.state = {
      viewMembers: true,
      members: [
        {
          id: 1,
          name: "Jim",
          isMember: true
        },
        {
          id: 2,
          name: "John",
          isMember: false
        }
    ]
}

在我的 render 函数中，我映射了这个数组，并且只显示与视图状态对应的成员（即如果 viewMembers 是 true，我只显示 isMember 是 true，反之亦然）。对于每个成员我return一个table<tr>。 map 函数包装在 CSSTransitionGroup 标记中，以在 table 行中淡入淡出。这一切都很好 - 请在此处查看工作代码：jsfiddle.net/d9cfh4zg/1/.

我的问题是它目前在淡出旧状态之前在新状态下淡出，使它的质量有点不稳定。如何让现有行在淡入新行之前淡出？

Answer 1

试试这个：

const styles = {
    fontFamily: "sans-serif"
  };

  const CSSTransitionGroup = React.addons.CSSTransitionGroup;

  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        viewMembers: true,
        members: [
          {
            id: 1,
            name: "Jim",
            isMember: true
          },
          {
            id: 2,
            name: "John",
            isMember: false
          },
          {
            id: 3,
            name: "Sarah",
            isMember: false
          },
          {
            id: 4,
            name: "Mary",
            isMember: true
          }
        ]
      };
        this.refreshState = true;
    }

    changeViewState(state) {
      this.refreshState = false;
      setTimeout(() => {

        if (state === "members") {
          this.setState({ viewMembers: true });
          if(!this.refreshState)
          {
           this.changeViewState(state);
           this.refreshState = true;
           }
        } else {
          this.setState({ viewMembers: false });
          if(!this.refreshState)
          {
            this.changeViewState(state);
            this.refreshState = true;
           }
        }
      }, 500);

    }
    render() {
      return (
        <div style={styles}>
          <h4>Members</h4>
          <ul>
            <li onClick={() => this.changeViewState("members")}>View Members</li>
            <li onClick={() => this.changeViewState("non-members")}>
              View Non-members
            </li>
          </ul>
          <MembersTable
            viewMembers={this.state.viewMembers}
            members={this.state.members}
            refreshState = {this.refreshState}

          />
        </div>
      );
    }
  }

  const MembersTable = (props) =>
    <table>
      <thead>
        <tr>
          <td>
            <strong>Id</strong>
          </td>
          <td>
            <strong>Name</strong>
          </td>
        </tr>
      </thead>
      <CSSTransitionGroup
                component="tbody"
                transitionName="fade"
                transitionAppear={true}
                transitionAppearTimeout={500}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
                >
        {props.members.map(member => {
          if (
            (props.viewMembers && member.isMember && props.refreshState) ||
            (!props.viewMembers && !member.isMember && props.refreshState)
          ) {
            return (
              <tr key={member.id}>
                <td>
                  {member.id}
                </td>
                <td>
                  {member.name}
                </td>
              </tr>
            );
          }
        })}
        </CSSTransitionGroup>
    </table>;

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

我添加了一个 refreshState 变量，并在 setTimeout 回调函数中更新了它，该回调函数被添加到 changeViewState 函数中。

这是更新后的 fiddle

希望这对您有所帮助。

等待一个 React CSS 动画结束，然后再开始另一个

Wait for one React CSS animation to end before starting another

javascript

reactjs

reactcsstransitiongroup

react-transition-group