html - 如何添加带有淡出过渡的CSS类

Question

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

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

我通过服务向组件推送新消息，所以当新消息到来时，它会立即显示在上面的循环中。

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

Answer 1

使用关键帧结构。

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

.notification {
animation: fadeout 3s
}