Border css changes faster than transform rotate

Question

Angular material has this mat-expansion-panel and I want to put a bottom-border under the mat-expansion-panel-header.

The bottom-border shouldn't be full width and that's why I changed the position of it under mat-expansion-panel-header span.

The problem is that there are 2 spans, one is mat-title and other is mat-indicator which is an arrow that is either up or down, depending on whether mat-expansion is expanded or not. The problem arises on rotation. On safari, it rotates with no problem but with chrome, there is a slight delay when the border is set to the top and removed from the bottom because when the arrow rotates, everything is upside down.

The mat-indicator has a built-in "style='transform: rotate(0deg)'" or "style='transform: rotate(180deg)'"

TL:DR MAIN QUESTION - Is there some css trick that can detect whether the rotate has a value of 0 or 180? For some reason, the classes of the indicator are identical whether it's up or down.

link demonstration of my problem. The css sees that parent has expanded and changes border to the top but the transform is so slow that the top-border is on the top and the elemen still has transform: rotate(0) — Niko
Show your code. A working sample on Stackblitz would be ideal. — G. Tranter
Example It's pretty weird because in my app I can't see the rotation that is happening in this example. The problem might be that even if you shorten the animation time, the fact is that there is no way to indicate when the rotation animation is finished. Because the mat-expansion-panel gets the class expanded way before that causes my issue in the first place. — Niko
!!! Always post the link to the EDIT version of stackblitz so we can look at code and troubleshoot. !!! stackblitz.com/edit/angular-material-lgfphw — G. Tranter

Devansh J Devansh J · Accepted Answer · 2018-04-25T10:04:04

Update :

Well I hope this helps... Not actually a solution to your problem... Just another method to get the same visual effect... : https://stackblitz.com/edit/angular-material-4pcnph?file=app/app.component.css

Original Answer:

(Answering your tldr question)

When the mat-expansion-panel is expanded it has a class mat-expanded

So you can use that to write your css something like :

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

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

Demo : https://stackblitz.com/edit/angular-tcy7fh?file=styles.css

Border css changes faster than transform rotate

1 Answers