javascript - react使用react-transition-group转场动画的问题？

Question

React，使用react-transition-group插件，想实现两个组件切换的一个转场效果，发现跟原网站的效果不符合，想知道问题出在哪里
原网站的转场效果是这样：
点击按钮，页面从右向左滑动，而且两个页面是紧贴着的（想要实现紧贴着的转场）

我实现的却是这样，两个页面没有紧贴，而且还多出一大片空白

附上代码

<SwitchTransition >    <CSSTransition key={this.state.isPhone} classNames='checkout' timeout={500}  >        {            this.state.isPhone ?                <Phone handleBack={() => { this.setPhoneState(false) }} handlePhoneClick={this.handlePhoneClick} />                :                <Main handlePhoneClick={this.handlePhoneClick} />        }    </CSSTransition></SwitchTransition>

css

.checkout-enter{    transform: translateX(100%);}.checkout-enter-active {    transform: translateX(0);    transition: all 500ms;}.checkout-exit {    transform: translateX(0);}.checkout-exit-active {    transform: translateX(-100%);    transition: all 500ms;}

请大佬纠正！

Answer 1

从你提供的代码和描述来看，你想要实现的效果是两个组件切换时，页面从右向左滑动，并且两个页面紧贴着。但是在你的实现中，两个页面并没有紧贴，并且还存在一大片空白。

这个问题出在你的 CSS 样式上。你需要调整你的 CSSTransition 组件的 timeout 属性，让它不仅仅作用于组件的进入和离开过程，还作用于组件的进入和离开的激活状态。你的 timeout 属性设置为500，这意味着组件的进入和离开过程的动画时间为500ms，但是进入和离开的激活状态的动画时间也是500ms。由于进入和离开的激活状态还包含了过渡的开始和结束状态，所以这个动画过程看起来会比预期的长。

你可以尝试将 timeout 属性设置为0，这样进入和离开过程的动画就会立即开始和结束，进入和离开的激活状态的动画时间就不会被计算在内。你的代码应该如下所示：

<SwitchTransition >    <CSSTransition key={this.state.isPhone} classNames='checkout' timeout={0}  >        {            this.state.isPhone ?                <Phone handleBack={() => { this.setPhoneState(false) }} handlePhoneClick={this.handlePhoneClick} />                :                <Main handlePhoneClick={this.handlePhoneClick} />        }    </CSSTransition></SwitchTransition>

此外，你的 CSS 样式应该修改为如下形式：

.checkout-enter{    transform: translateX(100%);}.checkout-enter-active {    transform: translateX(0);    transition: all 500ms;}.checkout-exit {    transform: translateX(0);}.checkout-exit-active {    transform: translateX(-100%);    transition: all 500ms;}

希望这个回答能帮到你。如果你有任何其他问题，欢迎继续提问。