Html 边框css的更改速度比变换旋转快

Angular material有这个mat扩展面板，我想在mat扩展面板标题下放置一个底部边框

底部边框不应该是全宽的，这就是为什么我改变了它在垫子扩展面板标题跨度下的位置

问题是有两个跨距，一个是垫子标题，另一个是垫子指示器，它是一个向上或向下的箭头，这取决于垫子是否展开。问题出现在旋转上。在safari上，它旋转没有问题，但是使用chrome，当边框设置为顶部并从底部移除时会有一点延迟，因为当箭头旋转时，一切都颠倒了

垫指示器具有内置的“style='transform:rotate（0度）”或“style='transform:rotate（180度）”功能

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

---

更新：

我希望这能帮上忙。。。实际上并不是你问题的解决方案。。。只是另一种获得相同视觉效果的方法…：

原始答复：

（回答您的tldr问题）

当展开

mat扩展面板时，它有一个类
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 */
}

演示：
演示我的问题。css看到父级已展开并将边框更改为顶部，但转换速度太慢，以至于顶部边框位于顶部，元素仍具有transform:rotate（0）显示代码。Stackblitz上的工作示例将是理想的。删除的文本。。。这很奇怪，因为在我的应用程序中，我看不到这个例子中发生的旋转。问题可能是，即使缩短动画时间，也无法指示旋转动画何时完成。因为mat扩展面板在导致我的问题之前就已经扩展了类。！！！始终将链接发布到stackblitz的编辑版本，以便我们可以查看代码并进行故障排除！！！谢谢你的最新答案。它最终解决了我正在处理的问题@妮可没问题。。。很乐意帮忙！：）