如何在紧挨着一行的子列上使用 CSSTransitionGroup？

Question

我在我的 ReactJS 项目中使用 Bootstrap 的网格系统。在一行下，我有多个列 (col-md-4)，我想在组件状态更改时将它们添加到行或从行中删除时对其进行动画处理。但是在行的正下方使用 CSSTransitionGroup 让列呈现为子项，在行下方和列上方留下 span 破坏列的左浮动。

<div className="row">
    <ReactCSSTransitionGroup
        transitionName={`fadeIn`}
        transitionEnterTimeout={200}
        transitionLeaveTimeout={200}>

           {list.map(user => { return (
               <div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
                   <div class="card">

                   </div>
               </div>
            )})}
     </ReactCSSTransitionGroup>
</div>

YIELDS:

<div class="row">
    <span>
        <div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
            <div class="card">
                ...
            </div>
        </div>
    </span>
</div>

正确的做法是什么？

Answer 1

已解决 : 只需在 CSSTransitionGroup 元素中添加 className="row"

示例代码在这里：

<CSSTransitionGroup
    transitionName="item"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
    className="row">

      {myIndustries}

</CSSTransitionGroup>

如何在紧挨着一行的子列上使用 CSSTransitionGroup？

How do I use CSSTransitionGroup on children columns immediately under a row?

reactjs

reactcsstransitiongroup