我正在使用 react transition group在渲染组件时处理动画 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;
}
}
最佳答案
这有点小技巧,但如果它对其他人有帮助,我通过缩短过渡并将动画置于“结束”状态来解决这个问题:
//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;
}
}
关于javascript - react 过渡组出现过渡无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56158423/