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

我使用React和CSSTransitionGroup组件在我的应用程序状态下在两组members之间切换。其状态包含members，其中每一个都有一个标志来说明他们是否是真正的成员。它还包含一个标志来跟踪哪种类型的成员，我们正在查看：等待一个React CSS动画结束后再开始另一个

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/。

我的问题是，它现在淡出旧的状态之前，新的状态，给它一个微不足道的质量。我怎样才能让现有的行在淡入淡出之前淡出？

来源

2017-08-29 GluePear

问题是您的行创建高度，只是没有显示。您可以尝试使用不透明度制作tr高度动画。 – bennygenel

@GluePear请查看编辑答案。希望能帮助到你。 –

试试这个：

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

希望这会有所帮助。

来源

2017-08-29 19:27:27

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

回答

相关问题