反应过渡组出现过渡无法正常工作

Question

我正在使用 react transition group 来处理渲染组件时的动画 CSS 过渡。我想要一个简单的组件淡入。

向外过渡似乎工作正常，但向内过渡不正常。

如果我在 onEnter 属性上放置调试器，我可以看到转换实际上 "should" 按预期工作。 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

这有点乱七八糟，但为了防止对其他人有所帮助，我通过缩短过渡并将动画置于 "end" 状态来解决此问题：

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

反应过渡组出现过渡无法正常工作

react transition group appear transitions not working properly

javascript

animation

css-animations

reactjs

react-transition-group