装载和卸载时过渡

Question

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

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

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

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

Answer 1

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

前任：

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

然后像这样使用它：

animation:         myAnimation 5s;