如何为Angular通知组件添加3秒淡出过渡的CSS类

嘿，我来帮你搞定这个自动消失的通知效果！咱们可以通过状态管理+CSS过渡的方式轻松实现，下面是具体步骤：

1. 调整消息数据结构 #

首先给每条消息加个状态标记，用来控制是否显示/淡出：

// 在你的通知组件里定义消息接口
interface NotificationMessage {
  content: string;
  show: boolean; // 控制显示状态
}

2. 组件逻辑处理：定时切换状态并移除消息 #

在组件中接收服务推送的消息，同时设置定时器，3秒后触发淡出，等过渡完成再从数组中移除：

import { Component, OnDestroy } from '@angular/core';
import { NotificationService } from './notification.service';
import { Subscription, timer } from 'rxjs';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})
export class NotificationComponent implements OnDestroy {
  messages: NotificationMessage[] = [];
  private messageSubscription: Subscription = new Subscription();

  constructor(private notificationService: NotificationService) {
    // 订阅服务的消息流
    this.messageSubscription = this.notificationService.messages$.subscribe(msg => {
      const newMsg: NotificationMessage = {
        content: msg.content,
        show: true
      };
      this.messages.push(newMsg);

      // 3秒后开始淡出
      const fadeTimer = timer(3000).subscribe(() => {
        newMsg.show = false;
        // 等待过渡动画完成（这里设为300ms，和CSS过渡时长一致）
        const removeTimer = timer(300).subscribe(() => {
          this.messages = this.messages.filter(m => m !== newMsg);
        });
        this.messageSubscription.add(removeTimer);
      });
      this.messageSubscription.add(fadeTimer);
    });
  }

  ngOnDestroy() {
    // 组件销毁时清理所有订阅，避免内存泄漏
    this.messageSubscription.unsubscribe();
  }
}

3. 编写CSS过渡样式 #

定义基础通知样式和淡出动画，这里用opacity和transform做平滑过渡：

.notification {
  position: fixed;
  /* 可以根据需求调整位置、外观 */
  top: 20px;
  right: 20px;
  margin-bottom: 12px;
  padding: 12px 24px;
  background-color: #2d3748;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  /* 定义过渡属性和时长 */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  opacity: 1;
  transform: translateY(0);
}

/* 淡出状态的样式 */
.notification.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

4. 修改模板绑定状态类 #

在模板中根据show状态动态添加fade-out类：

<aside *ngFor="let message of messages">
  <div class="notification" [class.fade-out]="!message.show">
    {{message.content}}
  </div>
</aside>

这样一来，每条新消息会先正常显示，3秒后自动触发淡出动画，动画结束后从DOM中移除，完美实现你要的效果！

内容的提问来源于stack exchange，提问作者tylkonachwile