使用react-transition-group实现React组件的无缝左右滑动切换
本文探讨如何利用react-transition-group库，实现两个React组件之间流畅的、紧贴屏幕边缘的左右滑动切换动画效果。
问题描述
假设我们有两个组件：Phone组件和Main组件。点击按钮后，希望页面实现从右向左的平滑滑动过渡，且两个组件在切换过程中无缝衔接，避免出现空白区域。
代码分析及问题解决
原始代码中，组件切换时出现空白，且动画效果不理想，主要原因在于CSS样式的设置以及组件的布局方式。
原始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;
}
改进后的CSS:
为了实现无缝切换和左右滑动，我们需要使用绝对定位，并控制组件的left属性来实现平移动画。
.checkout-enter {
position: absolute;
top: 0;
left: 100%; /* 初始位置在屏幕右侧 */
width: 100%;
}
.checkout-enter-active {
left: 0; /* 动画结束位置在屏幕左侧 */
transition: left 500ms ease-in-out; /* 添加缓动效果 */
}
.checkout-exit {
position: absolute;
top: 0;
left: 0; /* 初始位置在屏幕左侧 */
width: 100%;
}
.checkout-exit-active {
left: -100%; /* 动画结束位置在屏幕左侧之外 */
transition: left 500ms ease-in-out; /* 添加缓动效果 */
}
改进后的组件结构:
为了确保组件的绝对定位生效，需要一个父容器来容纳它们。
{/* 父容器 */}{this.state.isPhone ? ( this.setPhoneState(false)} handlePhoneClick={this.handlePhoneClick} /> ) : ( )}
通过以上调整，Phone组件和Main组件将始终占据整个屏幕宽度，在切换过程中平滑地从屏幕右侧滑入或滑出，实现无缝衔接的左右滑动效果。 transition属性中添加ease-in-out可以使动画更加自然。 确保Phone和Main组件本身没有设置影响布局的样式。
