javascript - 等待一个 React CSS 动画结束后再开始另一个

Question

我正在使用 React 和 CSSTransitionGroup组件在两组 members 之间切换在我的应用程序的状态下。其状态包含members ，每个都有一个标志来表明他们是否是真正的成员。它还包含一个标志来跟踪我们正在查看的成员(member)类型:

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

在我的render函数我映射到这个数组，并且只显示与 View 状态相对应的成员(即，如果 viewMembers 是 true ，我只显示 isMember 是 true 的成员，反之亦然)。对于每个成员，我返回一个表 <tr> 。 map函数被包装在 CSSTransitionGroup 中标签淡入表格行。这一切都工作正常 - 请参阅此处的工作代码: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 变量，并在 changeViewState 函数中添加的 setTimeout 回调函数中更新了它。

这是更新后的fiddle

希望这有帮助。