Длительность встроенного перехода странное поведение - PullRequest
Новая
       20

Длительность встроенного перехода странное поведение

0 голосов
/ 19 февраля 2020

Я делаю всплывающую анимацию текста с помощью CSSTransition. Это работает, но только если я укажу продолжительность анимации в файле css. Я хочу сохранить параметр продолжительности в одном месте (файл js), чтобы сохранить код DRY. Прямо сейчас мне нужно указать его как в классе css, так и в timeout prop.

класса CSSTransition. Проблема в том, что когда я раскомментирую встроенный стиль с продолжительностью, анимация сначала идет вверх, но затем она идет назад и это не должно Что мне не хватает? Когда класс *-enter-active отключается, анимированный текст должен стать скрытым из-за класса diff. Может быть, браузер не пересчитывает стили? Почему это работает, когда продолжительность указана в css и не работает, когда она находится в style prop?

Вот codepen . Раскомментируйте строку 20 в файле js, чтобы увидеть ошибку. 

const AnimatedDiff = ({value}) => {
  const [prev, setPrev] = React.useState(value)
  const diff = value - prev
  const diffSign = diff > 0 ? '+' : ''
  const diffStr = diffSign + diff

  const timeout = 800

  return (
    <CSSTransition 
      classNames='diff' 
      timeout={timeout} 
      in={diff > 0}
      onEntered={() => setPrev(value)}
    >
      <div 
        className='diff'
        // style={{transitionDuration: `${timeout}ms`}}
      >
        {diffStr}
      </div>
    </CSSTransition>
  )
}

.diff {
  position: absolute;
  right: 0;
  visibility: hidden;
}

.diff-enter-active {
  visibility: visible;
  transform: translate(0, -100%);
  transition: transform;
  transition-duration: 800ms;
}

1 Ответ

0 голосов
/ 09 марта 2020

Я понял. Мне нужно заменить visibility опору на display. Это делает трюк. Кроме того, display: block следует указывать в отдельном правиле .diff-enter, а не в .diff-enter-active. Итак, стили становятся: 

.diff {
  position: absolute;
  right: 0;
  display: none;
}

.diff-enter {
  display: block;
}

.diff-enter-active {
  transform: translate(0, -100%);
  transition: transform;
}
...