реагируют переходные группы появляются переходы не работают должным образом - PullRequest
Новая
       42

реагируют переходные группы появляются переходы не работают должным образом

0 голосов
/ 16 мая 2019

Я использую реагирующая группа переходов для обработки анимированных переходов CSST при визуализации компонента.Мне нужно простое добавление компонента.

Кажется, что переход работает правильно, но переход не работает.

Если я добавлю отладчик в свойство onEnter, яМожно увидеть, что переход на самом деле "должен" работать, как ожидалось.Активное состояние ввода активируется, элемент начинается с непрозрачности 0,1, и если я возобновляю отладчик, происходит переход.

Но без отладчика, когда компонент выполняет рендеринг, даже если к компоненту добавлено состояние enter-active, оно сразу видно - исчезновение непрозрачности не происходит.

Вот мой код: 

<TransitionGroup component={null}>
{mobileSelectorsActive && 
<CSSTransition 
    classNames="anim_mobile_selectors" 
    timeout={5000}
    //appear={true}
    //mountOnEnter={true}
    onEnter={()=>{
        //debugger;
    }}
>
<div>...</div>
</CSSTransition>
}
</TransitionGroup>

и CSS: 

.anim_mobile_selectors {
    &-enter {
        opacity: 0.1;
        transition: opacity 5000ms linear;
    }
    &-enter-active, &-enter-done {
        opacity:1; 
    }
    &-exit {
        opacity:1;
    }
    &-exit-active {
        opacity: 0.1;
        transition: opacity 5000ms linear;
    }
}

enter image description here

1 Ответ

0 голосов
/ 16 мая 2019

Это что-то вроде хака, но в случае, если это кому-то поможет, я решил это, укоротив переход и переведя анимацию в состояние «конец»: 

//JSX
<CSSTransition 
    classNames="anim_mobile_selectors" 
    timeout={{
        enter: 100,
        exit: 500,
    }}
><div>...</div>
</CSSTransition>



//CSS
    .anim_mobile_selectors {
        &-enter {
            opacity: 0.01;
        }
        &-enter-active {
            opacity: 0.01;
        }
         &-enter-done {
            opacity:1; 
            transition: opacity 500ms linear;
        }
        &-exit {
            opacity:1;
        }
        &-exit-active {
            opacity: 0.01;
            transition: opacity 500ms linear;
        }
    }
...