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？

1 个答案: