React Transition Group - Magnetic slider (change direction not working correctly)

Question

I am trying to build a magnetic slider using react transition group. It works going only downwards, changing from down til up, going upwards but NOT changing from up til down.

I guess I must be doing something wrong with childfactory.

This post does not get me further: React CSSTransition wrong class used on exit

Relevant part of my app. It slides synthetic event onWheel:

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

A link to a video from screen recording: https://youtu.be/KdBRZNlBj7M

I guess the problem is a change from class transition-up-enter-active to transition-down-exit

Answer 1

You can just move the direction className to a wrapper element like this.

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>

and your css would change to this

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