安装和卸载时的过渡

Question

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

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

因此，我现在想转移单个元素，并且真的不希望从父组件管理Fade的状态。

我只希望在安装和卸载时触发淡入淡出。 做这个的最好方式是什么？

Answer 1

这取决于但您可以在CSS中使用关键帧来实现

例如：

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

然后像这样使用它：

 animation:         myAnimation 5s;