如何添加具有淡出过渡的 css 类

Question

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

  <aside  *ngFor="let message of messages ">
    <div class="notification" style="position:fixed">
      {{message.content}}
    </div>
  </aside>

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

我想让每条消息可见 3 秒钟。我需要添加一个具有淡出过渡的类，该类设置为 3 秒。

Answer 1

使用keyframes结构。

@keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}
.notification {
animation: fadeout 3s
}