CSSTransition Component

Question

我想在组件的初始安装时或之后为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>

Answer 1

如果您想在第一个装载集appear到true上转换：转换道具出现

你可以试试这个：

<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

Answer 2

另一个简单的方法是使用CSS动画。无需为元素设置额外的类。

只需在您想要的元素的CSS代码中使用它：

感谢用于css的animate.css插件，看看它：

https://daneden.github.io/animate.css/

示例：

@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
padding: 40px 30px;
background: #aaa;
animation: fadeIn 2s;
}

<div class="elem">
Hello, this is a text
</div>