如何添加淡出过渡的css类

Question

我正在尝试在我的示例Angular应用程序中执行自己的通知组件。 我有以下模板：

<meta name="viewport" ccontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"">

我将新消息通过服务推送到组件，因此当新消息出现时，它会立即显示在上面的循环中。

我想让每条消息都显示3秒钟。 我需要添加一个淡出过渡的类，设置为3秒。

Answer 1

使用keyframes结构。

@keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}

.notification {
animation: fadeout 3s
}