我在用着反应过渡基团 http://reactcommunity.org/react-transition-group/transition渲染组件时处理动画 CSSTransition。我想要一个组件的简单淡入。
转出似乎工作正常,但转入则不然。
如果我在上面放一个调试器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;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)