html - CSSTransition 组件

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