Question

我是新来的人。我正在尝试学习react-transition-group。我正在关注网络老板教程。您能帮我还是说一下，为什么这段代码根本不起作用？根据控制台选项卡中的教程，我的div在添加/删除它时应具有不同的类名（我尚未应用任何CSS样式-我只需要更改类名）即可。

/*Basket*/
    <TransitionGroup 
                component={BasketItem}  
                removeBasket={this.props.removeBasket}
                items={items}
                key={key}
                index={key}
                timeout={{enter: 5000, exit: 5000}} 
              />

/*Basket item*/
      <CSSTransition 
                    timeout={5000}
                    className="basket-item" 
                    key={key} >
                    <div key={key}>
                      <p> div content </p>
                    </div>
    </CSSTransition>

Answer 1

某事告诉我您应该在CSSTransition中放入TransitionGroup：

<TransitionGroup ...>
    <CSSTransition ...>
        <div>...</div>
    </CSSTransition>
</TransitionGroup>

您现在拥有的是

<TransitionGroup .../>

<CSSTransition ...>
    <div>...</div>
</CSSTransition>

等同于

<TransitionGroup ...>
</TransitionGroup>

<CSSTransition ...>
    <div>...</div>
</CSSTransition>

反应CSStransition不适用

1 个答案: