Нет перехода между состоянием выхода и входа в группу реагирования перехода - PullRequest
Новая
       30

Нет перехода между состоянием выхода и входа в группу реагирования перехода

1 голос
/ 28 апреля 2020

Я создаю HO C, который анимирует группу дочерних компонентов, используя TransitionGroup и Transition из react-transition-group, для достижения эффекта "постепенного исчезновения" и "постепенного исчезновения". Мой компонент выглядит примерно так: 

const defaultStyle = (duration: number) => ({
   transition: `opacity ${duration}ms ease-in-out`,
   opacity: 0,
});

const transitionStyles: any = {
   entering: {opacity: 1},
   entered: {opacity: 1},
   exiting: {opacity: 0},
   exited: {opacity: 0},
};
export const FadeAnimation: FC<FadeAnimationProps> = ({
   duration,
   children
}) => {
   const elements = React.Children.toArray(children);

   return (
       <TransitionGroup component={null}>
           {elements.map((child, index) => {
               return (
                   <Transition timeout={duration} key={index}>
                       {(transitionState: string) => {
                           return React.cloneElement(child as ReactElement, {
                               style: {...defaultStyle(duration), 
                                       ...transitionStyles[transitionState]},
                           });
                       }}
                   </Transition>
               );
           })}
       </TransitionGroup>
   );
};

Однако я не могу получить постепенное исчезновение при переходе к работе, и мои компоненты отображаются с непрозрачностью 1., когда я выполняю console.log стиля для состояния Я получаю opacity: 0 для выхода, затем opacity: 1 для входа. Но нет перехода между этими состояниями.

Я неправильно использую эту библиотеку? Что-то мне не хватает в параметрах анимации?

Демо: https://jsfiddle.net/4e2xgrtf/2/

В демоверсии, в консоли, вы можете увидеть состояние, а также стиль, который идет с этим. если вы нажмете «добавить элемент», вы увидите новый элемент с состоянием (выход / непрозрачность 0), а затем (ввод / непрозрачность 1), но анимация не применяется.

...