边框 css 变化比变换旋转快

Question

Angular material 有这个 mat-expansion-panel 我想在 mat-expansion-panel-header 下面放一个底部边框。

底部边框不应该是全宽的，这就是为什么我在 mat-expansion-panel-header span 下改变了它的位置。

问题是有2个跨度，一个是mat-title，另一个是mat-indicator，它是一个向上或向下的箭头，取决于mat-expansion是否展开。问题出现在轮换上。在 safari 上，它旋转没有问题，但是 chrome，当边框设置到顶部并从底部移除时会有轻微的延迟，因为当箭头旋转时，一切都是颠倒的。

mat-indicator 有一个内置的 "style='transform: rotate(0deg)'" 或 "style='transform: rotate(180deg)'"

TL:DR 主要问题 - 是否有一些 css 技巧可以检测旋转的值是 0 还是 180？出于某种原因，指标的类无论是向上还是向下都是相同的。

Answer 1

更新：

好吧，我希望这会有所帮助...实际上并不能解决您的问题...只是获得相同视觉效果的另一种方法...：https://stackblitz.com/edit/angular-material-4pcnph?file=app/app.component.css

原答案：

（回答你的 tldr 问题）

当 mat-expansion-panel 展开时它有一个 class mat-expanded

所以你可以用它来写你的 css 像这样的东西：

.mat-expansion-indicator::after{ /* when its 0deg */
    color: blue; /* whatever */
}

.mat-expanded .mat-expansion-indicator::after{ /* when its 180deg */
    color: red; /* whatever */
}

演示：https://stackblitz.com/edit/angular-tcy7fh?file=styles.css

边框 css 变化比变换旋转快

Border css changes faster than transform rotate

html

css

transform

rotation

angular-material