[MenuSurface] mdc-menu-surface open animation transition

[DRiFTy17]

It seems that with the refactor to use feature-targeting (in this commit 56b8467) has caused the mdc-menu-surface--open class to be defined before the mdc-menu-surface--animating-open class in the resulting CSS. This causes a specificity issue and the transition is not occurring properly.

It's worth noting that I am using these classes manually to add them to an element, and wait for the transitionend event to fire. Because of the specificity caused by the order in the CSS, the transition does not run properly and the animation does not take place.

You can see that in the 0.43.0 version, the &--open class is defined after the &--animating-open class in the mdc-menu-surface.scss file. Now that this has been pushed down into _mixins.scss you can see that the &--open definition has been moved before the &--animating-open definition. This can clearly be seen when you put both classes on an element. Due to the mdc-menu-surface--animating-open coming later in the CSS file, the browser will use those styles even though the mdc-menu-surface--open class is applied after the other class due to them having the same specificity.

[kfranqueiro]

Thanks for bringing this up. I wonder if this explains the cause of what #4371 fixes? (In which case this will be fixed in 0.44.1.)

[DRiFTy17]

Ah sorry for missing that PR. It does look similar, but I actually just tried applying the PR changes to my local copy, and it doesn't seem to fix this issue alone... Moving the &--open definition after &--animating-open does cause the transition to run. Thanks!

[abhiomkar]

I just tested with above PR, it does seem to fix the issue.

[DRiFTy17]

@abhiomkar I just tested this again to be sure, and I am in fact still seeing an issue with the transition (see last paragraph at bottom for why it appears the PR is fixing the issue)... Correct me if I'm wrong, but the PR just moves the transition from the mdc-menu-surface--animating-open class to the mdc-menu-surface class, correct?

The issue I am seeing is that no matter which class the transition is specified on, it never gets the opacity and transform styles from the mdc-menu-surface--open class because they are overwritten by the mdc-menu-surface--animating-open class having a higher default specificity based on order in the stylesheet.

Keep in mind I'm not using the MDC menu JavaScript implementation, only the CSS classes. I am managing the adding/removing of the classes myself in my own JavaScript implementation (web component). I wait for the transitionend event to fire on the element to know when to remove the mdc-menu-surface--animating-open class.

I set up an example of this on StackBlitz. Both of the following links have exactly the same code, the only difference is the version of the material-components-web package in the package.json, and the addition of the changes made in the PR in the styles.css file for the 0.44.0 example.

Here is the example of the issue (not working properly) with version 0.44.0:
https://stackblitz.com/edit/js-xvhnbk?file=package.json

(note: The PR is simulated in the styles.css file by forcing the transition to live on the mdc-menu-surface class, but I have tested pulling the PR into a local copy and confirmed the same results when compiling the sass files).

Here is the exact same example (working properly) with version 0.43.1:
https://stackblitz.com/edit/js-sfkeb8?file=package.json

The reason it is giving you the effect that it's working properly (after applying the changes in the PR) in the MDC menu component is because if you look in this file https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu-surface/foundation.js at the open method, only a setTimeout is used. The transition doesn't trigger until the mdc-menu-surface--animating-open class is removed. The transition isn't actually running until 120ms (TRANSITION_OPEN_DURATION) has passed which is causing a slight delay in the open animation. By moving the order of the classes like I have specified, the transition animation will run when the mdc-menu-surface--open class is added and the removal of the mdc-menu-surface--animating-open class will no longer cause the transition.

Please let me know if I'm missing something here that you are doing differently.