反应过渡组出现过渡无法正常工作 [英] react transition group appear transitions not working properly
问题描述
我正在使用反应过渡组来处理动画CSSTransitions.呈现.我想要组件的简单淡入.
I'm using react transition group to handle animated CSSTransitions when a component is rendered. I want a simple fade in of a component.
过渡似乎正常,但是过渡不起作用.
The transition out seems to work properly, but the in transition does not.
如果将调试器放在onEnter
属性上,则可以看到转换实际上应该"按预期工作.触发Enter-active状态,该元素以0.1的不透明度开始,如果我恢复调试器,则会发生过渡.
If I put a debugger on the onEnter
property, I can see that the transition actually "should" work as expected. The enter-active state is triggered, the element starts at 0.1 opacity, and if I resume the debugger, the transition takes place.
但是如果没有调试器,则在呈现组件时,即使将enter-active
状态添加到了组件,它也可以立即可见-不会发生不透明褪色.
But without the debugger, when the component renders, even though the enter-active
state is added to the component, it is just immediately visible - no opacity fade in occurs.
这是我的代码:
<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;
}
}
推荐答案
这有点麻烦,但万一它对其他人有帮助,我通过缩短过渡时间并将动画放在结束"的位置来解决. "状态:
This is a bit of a hack, but in case it helps anyone else, I solved this by shortening the transition in, and putting the animation on the "end" state:
//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;
}
}
这篇关于反应过渡组出现过渡无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!