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;
}

请大佬纠正！