使用 react-transition-group 左右滑动答案

【问题标题】：Right and left sliding with react-transition-group使用 react-transition-group 左右滑动
【发布时间】：2021-12-19 07:58:57
【问题描述】：

我想用 react-transition-group 进行左右滑动。当我按下下一个按钮时，它会向右（下一步），当我点击返回按钮时，我想从左边来。我的代码总是从右侧获取它。我怎样才能实现这样的目标

.onboarding-screen
    display flex
    flex-direction column
    flex-grow 1
    position absolute
    width 100%
    height 100%
    align-items center
    &.step-enter
        transform translateX(100%)
        transition(all 1s)
    &.step-enter-active
        transform translateX(0%)
        transition(all 1s)
    &.step-enter-done
        position relative
    &.step-exit
        transform translateX(-100%)
        transition(all 1s)
    &.step-exit-active
        transform translateX(-100%)
        transition(all 1s)
    &.step-exit-done
        position relative

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

首先，您不需要-done 变体，
您的 css 仅在您单击下一个按钮时处理动画（从右侧进入，从左侧退出），因此您还需要相反的情况：

CSS：

.right-to-left-enter {
    transform: translateX(100%);
}
.right-to-left-enter-active {
    transform: translateX(0);
    transition:all 1s ease;
}      

.right-to-left-exit {
    transform: translateX(0);
}
.right-to-left-exit-active {
    transform: translateX(-100%);
    transition:all 1s ease;
}      

.left-to-right-enter {
    transform: translateX(-100%);
}
.left-to-right-enter-active {
    transform: translateX(0);
    transition:all 1s ease;
}      

.left-to-right-exit {
    transform: translateX(0);
}
.left-to-right-exit-active {
    transform: translateX(100%);
    transition:all 1s ease;
}

你需要TransitionGroup 和CSSTransition 来实现你想要的滑动动画。不过有一点需要注意：

一旦安装了 CSSTransition，即使您在旅途中更改 classNames 属性，也无法更改退出动画。但是TransitionGroup 组件中有一个名为childFactory 的属性，它使您能够更改已安装的CSSTransition 组件的属性。

这是您需要的代码：

const [isNext, setIsNext] = useState(true);

const onNext = () => setIsNext(true);
const onPrevious = () => setIsNext(false);

return (
<TransitionGroup childFactory={child => React.cloneElement(child, { classNames: isNext ? "right-to-left" : "left-to-right", timeout: 1000 })}>
    <CSSTransition key={key} classNames="right-to-left" timeout={1000}>
          // Put your sliding content here. Change the key as the content changes.
          // The value of the key is unimportant
    </CSSTransition>
</TransitionGroup>
);

不要忘记在滑动内容上使用绝对定位

【讨论】：