挂载和卸载的过渡

Question

基本上我想做这样的事情：

visible ?
<Fade>
   <SomeComponent/>
</Fade> 
: undefined

所以我现在想传输单个元素，并且不想从父组件管理 Fade 的状态。

我只想在挂载和卸载时触发淡入淡出。 最好的方法是什么？

Answer 1

这取决于，但你可以用关键帧在 css 中做到这一点

例如：

@keyframes myAnimation {
  0%   { opacity: 0; }
  50% { opacity: 1; }
  100%   { opacity: 0; }
}

然后像这样使用它：

 animation:         myAnimation 5s;