Question

我正在尝试使用反应过渡基团构建磁性滑块。它只能向下运行，从向下直到向上变化，一直向上，但从向上直到向下没有变化。

我想我的孩子工厂一定做错了事。

这篇文章对我没有帮助： React CSSTransition wrong class used on exit

我的应用程序的相关部分。它将合成事件滑动到车轮上：

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

我想问题是从 transition- 上 -enter-active 类更改为 transition- 下 -exit < / em>

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

反应过渡组-磁性滑块（更改方向无法正常工作）

1 个答案: