Angular Material 14：按钮加载动画无法运行问题排查

核心问题分析 #

动画未启动主要源于以下几点：

• Angular Material按钮默认未设置position: relative，导致绝对定位的伪元素脱离按钮范围，无法正常显示
• 按钮原有文字未隐藏，会覆盖加载动画
• 组件CSS的视图封装机制可能导致.spinner样式无法正确作用到按钮元素

具体解决步骤 #

1. 为按钮添加相对定位并隐藏文字
   修改.spinner类，给按钮加上相对定位，同时隐藏原有文字避免覆盖动画：

   .spinner {
     position: relative;
     color: transparent;
   }
   

2. 优化伪元素样式适配按钮主题
   调整边框颜色，让动画在不同样式的按钮上都能正常显示：

   .spinner:before {
     position: absolute;
     top: 50%;
     left: 50%;
     animation: spinner 0.8s linear infinite;
     box-sizing: border-box;
     margin-top: -10px;
     margin-left: -10px;
     border: 2px solid rgba(255,255,255,0.3);
     border-top-color: white;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     content: '';
   }
   

3. 确保CSS样式的作用范围
   如果样式写在组件的.component.css中，Angular的视图封装会自动添加属性选择器，导致样式不生效。可以二选一：

   • 将样式移到全局样式文件（如styles.css）
   • 在组件装饰器中关闭视图封装：

     @Component({
       selector: 'app-your-component',
       templateUrl: './your-component.component.html',
       styleUrls: ['./your-component.component.css'],
       encapsulation: ViewEncapsulation.None
     })
     

4. 校验动画触发逻辑
   确保点击按钮时正确为按钮添加spinner类，比如通过布尔值控制：

   <button mat-raised-button [class.spinner]="isLoading" (click)="loadData()">Sample2</button>
   

   isLoading = false;
   loadData() {
     this.isLoading = true;
     // 模拟异步请求逻辑
     setTimeout(() => {
       this.isLoading = false;
     }, 2000);
   }
   

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