1

我正在尝试使用反应过渡组构建磁性滑块。它只能向下工作，从向下变化到向上，向上变化，但不能从向上变化到向下。

我想我一定是在 childfactory 做错了什么。

这篇文章没有让我更进一步： React CSSTransition wrong class used on exit

我的应用程序的相关部分。它在Wheel 上滑动合成事件：

const classNames = {
      appear:styles[`transition-${direction}-appear`],
      enter: styles[`transition-${direction}-enter`],
      enterActive: styles[`transition-${direction}-enter-active`],
      enterDone: styles[`transition-${direction}-enter-active`],
      exit: styles[`transition-${direction}-exit`],
      exitActive: styles[`transition-${direction}-exit-active`],
      exitDone: styles[`transition-${direction}-exit-active`],
 }

<TransitionGroup 
  component={null}
  childFactory={child => React.cloneElement(child, { classNames })}
 >
  {landingPages.filter((page,index) => {return index ===currentImageIndex}).map((item, index) => {
  const backgroundColor = (currentImageIndex % 2 === 0) ? "var(--background-color)" : "#4A4A4A"
  const id = item.id + currentImageIndex

  return (
    <CSSTransition
      unmountOnExit
      appear={true} key={id} 
      timeout={{enter: 0, exit: duration}} 
      onExiting={() => this.transitionEnd()}
      classNames={classNames}
     >
       <GRID />
     </CSSTransition>
   )})}
</TransitionGroup>

index.module.css：

.transition-down-enter {
  transform: translateY(100vh);
}

.transition-down-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.transition-down-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.transition-down-exit-active {
  transform: translateY(-100vh);
  transition: transform 1000ms ease-out;
}


.transition-up-enter {
  position: unset;
  transform: translateY(-100vh);
}

.transition-up-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.transition-up-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.transition-up-exit-active {
  transform: translateY(100vh);
  transition: transform 1000ms ease-out;
}

屏幕录制视频的链接： https ://youtu.be/KdBRZNlBj7M

我想问题是从类转换-向上-进入-活动到转换-向下-退出

4

1 回答 1

1

您可以将方向 className 移动到这样的包装器元素。

const classNames = {
      appear:styles[`transition-appear`],
      enter: styles[`transition-enter`],
      enterActive: styles[`transition-$enter-active`],
      enterDone: styles[`transition-enter-active`],
      exit: styles[`transition-exit`],
      exitActive: styles[`transition-exit-active`],
      exitDone: styles[`transition-exit-active`],
 }

<div className={direction}>
<TransitionGroup 
  component={null}
  childFactory={child => React.cloneElement(child, { classNames })}
 >
  {landingPages.filter((page,index) => {return index ===currentImageIndex}).map((item, index) => {
  const backgroundColor = (currentImageIndex % 2 === 0) ? "var(--background-color)" : "#4A4A4A"
  const id = item.id + currentImageIndex

  return (
    <CSSTransition
      unmountOnExit
      appear={true} key={id} 
      timeout={{enter: 0, exit: duration}} 
      onExiting={() => this.transitionEnd()}
      classNames={classNames}
     >
       <GRID />
     </CSSTransition>
   )})}
</TransitionGroup>
</div>

你的CSS会变成这个

.down .transition-enter {
  transform: translateY(100vh);
}

.down .transition-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.down .transition-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.down .transition-exit-active {
  transform: translateY(-100vh);
  transition: transform 1000ms ease-out;
}


.up .transition-enter {
  position: unset;
  transform: translateY(-100vh);
}

.up .transition-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.up .transition-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.up .transition-exit-active {
  transform: translateY(100vh);
  transition: transform 1000ms ease-out;
}
于 2020-10-13T18:58:35.460 回答