反应过渡组出现过渡不正常

Question

渲染组件时，我正在使用react transition group来处理动画CSSTransitions。我想要组件的简单淡入。

过渡过渡似乎正常，但是过渡过渡则无效。

如果将调试器放在onEnter属性上，则可以看到过渡实际上“应该”按预期工作。触发了Enter-active状态，该元素以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;
    }
}

Answer 1

这是一个小技巧，但是如果它对其他人有帮助，我可以通过缩短过渡时间并将动画置于“结束”状态来解决此问题：

//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;
        }
    }