我正在使用react 转换组在呈现组件时处理动画 CSSTransitions。我想要一个简单的组件淡入。

过渡出来似乎工作正常，但过渡中却没有。

如果我在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;
    }
}