用反应动画表格行

Posted 2023-03-06

【中文标题】用反应动画表格行

【英文标题】：Animate table rows with react

【发布时间】：2016-12-11 18:16:44

【问题描述】：

我有一个用 react 渲染的表（大约 100 行），但我想要一行一行地出现的效果。有没有办法用 React 做到这一点？下面是我的 React 代码（willMount 过程中的 derivedPairs 函数提供了表格的数据）。

var columns = [
       key: 'pairNo', label: 'Zaporedna številka' ,
       key: 'homeTeam', label: 'Domača ekipa' ,
       key: 'awayTeam', label: 'Gostujoča ekipa' ,
       key: 'score', label: 'Rezultat' 
  ];

  var Table = React.createClass(

      getInitialState: function() 
        return data: this.props.data;
      ,

      componentWillMount: function() 
        derivePairs();
      ,

      render: function() 
          var headerComponents = this.generateHeaders(),
              rowComponents = this.generateRows();

          return (
              <table>
                  <thead>headerComponents</thead>
                  <tbody>rowComponents</tbody>
              </table>
          );
      ,

      generateHeaders: function() 
          var cols = this.props.cols;  // [key, label]

          // generate our header (th) cell components
          return cols.map(function(colData) 
              return <th key=colData.key>colData.label</th>;
          );
      ,

      generateRows: function() 
          var cols = this.props.cols,  // [key, label]
              data = this.props.data;

          var round=1;
          var pairNo=1;
          var oldRound=0;
          var teamName=null;
          return this.state.data.map(function(item, i) 
              // handle the column data within each row
              var htmlExcerpt = null;
              var len = Object.keys(cols).length;
              if (oldRound !== item.round) 
                  i=i+1;
                  htmlExcerpt = <tr key='round'+item.round><td colSpan=len>Round: item.round</td></tr>;
                  oldRound = item.round;
              
              var cells = cols.map(function(colData) 
                  console.log(colData);
                  // colData.key might be "firstName"
                  if (colData.key == "pairNo") 
                    return (<td> pairNo </td>);
                   else 
                    if (colData.key == "homeTeam" || colData.key == "awayTeam") 
                      teamName = config.teams[item[colData.key]].name;
                      return (<td> teamName </td>);
                     else 
                      return (<td> item[colData.key] </td>);
                    
                  
              );
              if (htmlExcerpt !== null) 
                return [htmlExcerpt,<tr className=enter-data key=i> cells </tr>];
               else 
                return <tr className=enter-data key=i> cells </tr>;
              
              pairNo=pairNo+1;
          );
      
  );

  ReactDOM.render(<Table cols=columns data=config.pairs/>, document.getElementById('roundPairs'));

感谢您的帮助。

【参考方案1】：

您可以通过使用ReactCSSTransitionGroup 包来实现此目的。

你的render 方法应该是这样的：

// ...

render: function() 
    var headerComponents = this.generateHeaders(),
        rowComponents = this.generateRows();

    return (
        <table>
            <thead>headerComponents</thead>
            <ReactCSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout=500
              transitionLeaveTimeout=300
              transitionAppearTimeout=500
              transitionAppear=true
              component="tbody"
            >
              rowComponents
            </ReactCSSTransitionGroup>
        </table>
    );
,

// ...

接下来，您应该定义 css 类。对于fade 动画名称，它们应该是：

.fade-enter 
  opacity: 0.01;


.fade-enter.fade-enter-active 
  opacity: 1;
  transition: opacity 500ms ease-in;


.fade-leave 
  opacity: 1;


.fade-leave.fade-leave-active 
  opacity: 0.01;
  transition: opacity 300ms ease-in;


.fade-appear 
  opacity: 0.01;


.fade-appear.fade-appear-active 
  opacity: 1;
  transition: opacity .5s ease-in;

【讨论】：

感谢您的帮助，但即使这样做了，它仍然只是显示而没有任何淡入淡出效果。桌子立即出现。请查看：bobr.si/react/index_new.html

@Bostjan，看起来你没有用ReactCSSTransitionGroup 组件包装行。很难理解，没有看到您当前的代码。你能把它上传到pastebin.com吗？

感谢您的帮助...我还将代码上传到 pastebin：pastebin.com/dWnay05w 虽然您也可以在我在第一条评论中发布的链接的源代码中看到它跨度>

这个solution 也可能适用于您的情况。问题是一样的 - 如何在初始渲染中一个接一个地为元素设置动画。

@Bostjan，抱歉，一开始我忘了将transitionAppearTimeout 和transitionAppear 属性添加到ReactCSSTransitionGroup。此外，您应该添加相应的类。查看更新的答案。