我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后,div 不应消失。我正在尝试使用 CSSTransition
组件并查看 reactcommunity.org 上的示例,但我根本无法实现任何动画。对于 in
,我没有任何来自某处的值,所以我尝试了 true
和 false
但没有任何改变。
CSS
.example-enter {
opacity: 0;
}
.example-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.example-exit {
opacity: 1;
}
.example-exit-active {
opacity: 0;
transition: opacity 300ms;
}
react
<CSSTransition classNames='example' in={false} timeout={200}>
<div
className='abc'
data-description="abc">
<div className='inner'>
<div className='head'>A</div>
<div className='explanation'>A</div>
</div>
</div>
</CSSTransition>
最佳答案
如果你想在第一次挂载时转换 appear
为 true
:Transition-prop-appear
你可以试试这个:
<CSSTransition
in={true}
timeout={1000}
classNames="fade"
appear={true}
>
<div className="box" />
</CSSTransition>
CSS:
.fade-appear {
opacity: 0;
transform: scale(0.2);
}
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: all 1000ms;
}
.box {
width: 50px;
height: 50px;
background: aqua;
}
在此处查看我的代码详细信息:https://codesandbox.io/s/csstransition-component-okpue
关于html - CSSTransition 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60750714/