[MdCard] md-card-header loses md-card-header-flex class during transition out

[FossPrime]

Click any button: https://codesandbox.io/s/o70lzxqw4y
The image will move to the next line when transitioning out because the md-card-header-flex property will be inexplicably removed.

Steps to reproduce

https://codesandbox.io/s/o70lzxqw4y

1. use md-card-header with a md-card-media
2. transition it out
3. Watch the image move out of position, to the next line, as the md-card-header-flex class gets removed

Which browser?

Chrome 68

What is expected?

Stay still while I transition out.

What is actually happening?

Not entirely sure why the flex class is removed... seems intentional.

Reproduction Link

https://codesandbox.io/s/o70lzxqw4y

[Samuell1]

Just dont use transition for all because it applying trasitions for everything and thats why its jittering. Plus you using very long time for animation and short distance to travel. Changing to 0.3s it looks and works fine: https://codesandbox.io/s/5xm9pqzqy4

And about that flex changing that looks pretty strange.

[FossPrime]

I didn't notice the jitter... I do notice the flex changing, this happens when I do an app page transition where a few cards change flex and break apart mid transition.

[korylprince]

I had the issue with the flex on one of my projects. I found putting in (even if it's empty) a <md-card-content> element fixes this.

It's caused by the md-ripple, so you could also remove that if you don't need it.

Fixed.

[FossPrime]

@korylprince I can reproduce with or without ripple, and with or without md-card-content included... on Chrome 68

[korylprince]

@rayfoss The issue I'm talking about specifically is when you click on the main part of the card (causing only the ripple), the card shrinks a few pixels, then grows back a second or so later.

On Chrome 66, 67, and 68 your reproduction link has this issue, and mine does not.

As I investigate more, I understand what you're talking about now, and no, this doesn't fix that issue. Sorry for the confusion.

[FossPrime]

@korylprince the ripple resize issue works even with <md-card-content style="display: none;" /> give it a stab with a PR? Alternatively, we could write some interesting tests that pretend to click and monitor unintentional dimension changes.

[korylprince]

@rayfoss I've filed another issue about it. I found the issue, but I'm not sure how to fix it without losing functionality or causing other issues. Thanks for your help!