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 在元素替换时触发的方法是什么？

Answer 1

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

幸运的是，您可以使用一个巧妙的技巧，它不涉及实际安装或卸载内部组件。 CSSTransitionGroup 使用 key 属性来识别元素并确定何时需要克隆它们 and/or 动画。 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 属性，即使您没有使用 "trick"。 CSSTransitionGroup 需要在其子项上使用该道具才能正常运行。

From the docs:

You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

CSSTransitionGroup 替换

CSSTransitionGroup replacing

reactjs

reactcsstransitiongroup