Question

我正在尝试这样做，以便当DOM上的内容替换时，客户端可以看到滑入和滑出。它只会切换出CSSTransitionGroup内部图像的src。

            <CSSTransitionGroup
                component='div'
                className='image-container'
                transitionName='slide-in'
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
            >
                {this.props.name?<img src={this.state.img}/>:null}
            </CSSTransitionGroup>

由于img在安装后未被删除，因此“离开”操作似乎不会触发。制作它的方法是什么，以便Leave会触发元素替换？

Answer 1

正如您所推断的那样，需要安装或卸载CSSTransitionGroup的内部元素才能使其工作。仅仅更改元素上的属性是不够的。

幸运的是，您可以使用一个巧妙的技巧，不涉及实际安装或卸载内部组件。 CSSTransitionGroup使用key属性来标识元素并确定何时需要克隆和/或设置动画。 key应该是某种类型的唯一标识字符串，如果key字符串发生更改，那么就CSSTransitionGroup而言，您刚刚卸载了一个组件。

试试这个：

        <CSSTransitionGroup
            component='div'
            className='image-container'
            transitionName='slide-in'
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            {this.props.name?<img key={this.state.img} src={this.state.img}/>:null}
        </CSSTransitionGroup>

现在当this.state.img发生变化时，它应该更改key属性并触发动画。

注意：即使你没有使用这个“技巧”，你也应该总是在CSSTransitionGroup内部的元素上使用key道具。为了正常运作，CSSTransitionGroup需要为其子项提供支持。

From the docs：

您必须为ReactCSSTransitionGroup的所有子项提供键属性，即使只渲染单个项目也是如此。这就是React将如何确定哪些孩子已进入，离开或留下。

CSSTransitionGroup替换

1 个答案: