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

【问题标题】：Wait for one React CSS animation to end before starting another等待一个 React CSS 动画结束，然后再开始另一个
【发布时间】：2018-02-07 08:18:17
【问题描述】：

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

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

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

我的问题是它目前在淡出旧状态之前在新状态中淡出，给它带来了轻微的质量问题。如何让现有行在淡入新行之前淡出？

【问题讨论】：

问题是您的行创建高度并且没有显示。您可以尝试使用不透明度为 tr 高度设置动画。
@GluePear 请查看编辑后的答案。希望对您有所帮助。

标签： javascript reactjs reactcsstransitiongroup react-transition-group

【解决方案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

希望这会有所帮助。

【讨论】：