CSSTransition 组件答案

【问题标题】：CSSTransition ComponentCSSTransition 组件
【发布时间】：2020-06-30 04:57:29
【问题描述】：

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

反应

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

【问题讨论】：

标签： html css reactjs css-transitions react-transition-group

【解决方案1】：

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

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

感谢 animate.css 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>

【讨论】：

【解决方案2】：

如果您想在第一个装载集上将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

【讨论】：