Angular2：点击显示的box-msg如何实现延迟淡出效果？

嘿，作为Angular新手遇到这种动画需求太正常啦，我来给你几个实用的方案搞定这个延迟淡出提示框的效果～

首先得说下你之前遇到的问题：直接加fadeOut类没生效，大概率是因为*ngIf是直接把元素插入DOM的，元素刚出现时就加淡出类，没有过渡的过程，或者你没给元素定义过渡动画的CSS规则，所以看不到效果。下面是两种靠谱的实现方式：

方案一：用Angular Animations（推荐，符合Angular最佳实践） #

Angular自带的动画模块能帮我们优雅地控制元素的过渡效果，步骤如下：

1. 先在你的模块中导入动画模块
   打开你的组件所属的模块文件（比如app.module.ts），导入BrowserAnimationsModule：

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [
       // 其他导入项...
       BrowserAnimationsModule
     ]
   })
   export class YourModule { }
   

2. 在组件中定义淡出动画
   在你的组件类里引入动画相关的API，然后定义一个带延迟的淡出动画：

   import { trigger, state, style, transition, animate } from '@angular/animations';
   
   @Component({
     selector: 'your-component',
     templateUrl: './your-component.component.html',
     animations: [
       trigger('fadeOutAnimation', [
         // 定义两种状态：可见和隐藏
         state('visible', style({ opacity: 1 })),
         state('hidden', style({ opacity: 0 })),
         // 从可见到隐藏的过渡：3秒延迟后，用500毫秒完成淡出动画
         transition('visible => hidden', animate('500ms 3000ms ease-out'))
       ])
     ]
   })
   export class YourComponent {
     hideSharedLinkCopyMessage = false;
     messageAnimationState = 'hidden'; // 控制动画状态
   
     onGenerateLinkClick() {
       // 先显示提示框，同时设置动画状态为可见
       this.hideSharedLinkCopyMessage = true;
       this.messageAnimationState = 'visible';
   
       // 3秒后触发淡出动画，动画结束后隐藏元素
       setTimeout(() => {
         this.messageAnimationState = 'hidden';
         // 等待动画完成（500ms）后，再移除DOM元素
         setTimeout(() => {
           this.hideSharedLinkCopyMessage = false;
         }, 500);
       }, 3000);
     }
   }
   

3. 修改模板绑定动画
   在你的提示框元素上绑定动画状态：

   <div *ngIf="hideSharedLinkCopyMessage"
        [@fadeOutAnimation]="messageAnimationState"
        class="alert alert-success box-msg" 
        role="alert">
     <strong>Link Generated!</strong> Your sharable link is copied to clipboard.
   </div>
   

方案二：CSS过渡+setTimeout（更简单，适合快速实现） #

如果你不想用Angular动画模块，也可以用纯CSS过渡结合setTimeout来实现：

1. 添加过渡动画的CSS
   在你的组件样式文件里添加：

   .box-msg {
     /* 定义opacity属性的过渡效果，时长500ms */
     transition: opacity 0.5s ease-out;
   }
   
   .fade-out {
     opacity: 0;
   }
   

2. 修改组件逻辑控制状态
   在组件类里添加一个控制淡出的状态变量，点击按钮后延迟添加淡出类：

   export class YourComponent {
     hideSharedLinkCopyMessage = false;
     isFading = false; // 控制是否淡出
   
     onGenerateLinkClick() {
       // 显示提示框，重置淡出状态
       this.hideSharedLinkCopyMessage = true;
       this.isFading = false;
   
       // 3秒后开始淡出
       setTimeout(() => {
         this.isFading = true;
         // 动画完成后隐藏元素
         setTimeout(() => {
           this.hideSharedLinkCopyMessage = false;
         }, 500);
       }, 3000);
     }
   }
   

3. 模板绑定淡出类
   把isFading变量绑定到元素的类上：

   <div *ngIf="hideSharedLinkCopyMessage"
        [class.fade-out]="isFading"
        class="alert alert-success box-msg" 
        role="alert">
     <strong>Link Generated!</strong> Your sharable link is copied to clipboard.
   </div>
   

这两种方案都能实现你要的“点击按钮显示提示，几秒后自动淡出”的效果，选哪种看你的需求～如果是长期维护的项目，推荐用Angular Animations，更符合框架规范；如果只是快速实现，CSS+setTimeout足够用啦。

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