CSSTransitionGroup 替换

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 操作似乎不会触发。有什么方法可以让 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 的所有子项提供 key 属性，即使仅呈现单个项目也是如此。这就是 React 将如何确定哪些孩子进入、离开或留下的方式。