Question

Angular材质有这个垫子扩展面板，我想在mat-expansion-panel-header下放一个底边框。

底部边框不应该是全宽，这就是我在mat-expansion-panel-header span下更改它的位置的原因。

问题在于有2个跨度，一个是mat-title，另一个是mat-indicator，它是向上或向下的箭头，具体取决于是否扩展了mat扩展。轮换问题就出现了。在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

原始答案：

（回答你的问题）

展开mat-expansion-panel后，它会有一个班级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的变化比变换旋转

1 个答案: