Html CST转换组件

我想在初始安装组件时或之后为div设置动画（淡入）。动画完成后，div不应消失。我试图使用

cstranition

组件，并在reactcommunity.org上查看示例，但我根本无法实现任何动画效果。我在中没有任何来自

的值，因此我尝试了
true
和
false
，但没有任何更改

CSS

反应


A.
A.
如果要在第一次装载时将
设置转换为
true
：

您可以尝试以下方法：

<CSSTransition
    in={true}
    timeout={1000}
    classNames="fade"
    appear={true}
  >
    <div className="box" />
  </CSSTransition>

在这里查看我的代码详细信息：
另一个简单的方法是使用CSS动画。不需要为元素设置额外的类

只需在所需元素的CSS代码中使用它：

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


例如：


@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
埃伦先生{
填充：40px 30px；
背景：#aaa；
动画：Fadein2S；
}

你好，这是一条短信

<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>

<CSSTransition
    in={true}
    timeout={1000}
    classNames="fade"
    appear={true}
  >
    <div className="box" />
  </CSSTransition>

.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;
}