React Transition Group - магнитный ползунок (изменение направления не работает правильно) - PullRequest
Новая
       50

React Transition Group - магнитный ползунок (изменение направления не работает правильно)

0 голосов
/ 16 ноября 2018

Я пытаюсь построить магнитный слайдер, используя группу реакции перехода.Он работает только вниз, меняется вниз вниз, идет вверх, но НЕ меняется сверху вниз .

Наверное, я что-то не так делаю с childfactory.

Это сообщение не дает мне дальнейших указаний: Реагирует неверный класс CSSTransition, используемый при выходе

Соответствующая часть моего приложения.Это скользящее синтетическое событие на колесе: 

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

Наверноепроблема заключается в переходе от класса переход- вверх -центр-активный к переход- вниз -выход

...