Border CSS变更快于transform rotate；Angular Material面板边框旋转异常问题

我明白你遇到的问题了——在Angular Material的折叠面板头部添加自定义底部边框后，边框的动画速度和箭头旋转的动画不同步，尤其是在非Safari浏览器里，边框变化总是比箭头转得快，视觉上显得很不协调对吧？

这本质是因为自定义边框的过渡动画和Angular Material默认的箭头旋转动画没有对齐，加上不同浏览器对CSS属性过渡的渲染优先级有差异导致的。下面是具体的解决步骤：

1. 统一动画的过渡参数 #

Angular Material的mat-indicator（折叠箭头）默认使用的过渡是transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)，我们需要让自定义边框的过渡和这个完全匹配，包括时长、时间曲线。

假设你是给mat-title添加底部边框，样式可以这么写：

/* 给标题元素设置相对定位，方便伪元素定位 */
.mat-expansion-panel-header .mat-title {
  position: relative;
}

/* 自定义底部边框的初始状态 */
.mat-expansion-panel-header .mat-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #your-border-color;
  /* 关键：和箭头过渡保持一致 */
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* 可选：帮助浏览器优化动画渲染 */
  will-change: width;
}

/* 面板展开时的边框状态 */
.mat-expansion-panel-header.mat-expanded .mat-title::after {
  width: 100%;
}

2. 显式锁定箭头的过渡动画 #

有时候自定义样式可能会意外覆盖掉Angular Material默认的箭头过渡，所以可以显式声明箭头的过渡规则，确保它不受干扰：

.mat-expansion-panel-header .mat-indicator {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

（这里的!important是为了确保优先级足够，如果你能通过样式权重覆盖的话，也可以不用）

3. 跨浏览器适配小技巧 #

如果调整后还是存在细微差异，可以尝试：

• 把过渡时长微调50ms左右（比如从0.2s改成0.25s），让视觉上的同步感更强
• 避免给边框同时设置多个过渡属性，只保留需要的width过渡
• 检查是否有其他样式（比如overflow、position）影响了边框的渲染时机

这样调整后，边框的展开/收起动画应该就能和箭头的旋转动画完美同步了。

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