Компонент, не размонтированный с реакционно-переходной группой и стилизованными компонентами - PullRequest
Новая
       26

Компонент, не размонтированный с реакционно-переходной группой и стилизованными компонентами

0 голосов
/ 27 февраля 2019

У меня есть компонент, который анимирует вход и выход с помощью react-transition-group, например, так: 

import { CSSTransition } from 'react-transition-group';

//....
const popoverWindow = 'popover-window'

<CSSTransition
  in={popoverVisible}
  classNames={popoverWindow}
  unmountOnExit
>
  <PopoverWindow
    popoverEdit={popoverEdit}
    saved={isSaved(apiSaved)}
    emailLoading={emailLoading}
    emailView={emailView}
    key={popoverWindow}
  >

//....


const PopoverWindow = styled.div` // styled-component
  &.${popoverWindow}-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }

  &.${popoverWindow}-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
  }
  &.${popoverWindow}-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
  }

  &.${popoverWindow}-exit-active {
    opacity: 0;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }
`

Хотя анимация, кажется, работает, она не отключается даже при использовании открытой пропи unmountOnExit.Я также попытался установить unmountOnExit={true}, но, похоже, это тоже не сработало.

Наконец, я попытался 

&.${popoverWindow}-exit-active {
    opacity: 0;
    display: none; // added this
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }

Но, похоже, это также нарушает существующую анимацию.

Независимо от того, что я пытаюсь, компонент все еще остается в DOM с классом -exit-active, прикрепленным к нему.Кто-нибудь имеет какие-либо идеи о том, как удалить этот компонент из DOM через размонтирование, а также его анимировать?

...