Transitions with media queries



Is it possible to do a transition effect when a media query rule is trigger?

Here an example:



Nope, not really. You would have to use vue.resize to detect the size-change in JS and use that to conditionally set a v-ifcondition:


Thanks @LinusBorg, but your codesandbox doesn’t work, isn’t?

The labels always are shown. I think handleResize method never is called.


It works for me when resizing the brwoser preview. might work better when using it in a new tab (grafik ) though.


Ok, it works on Safari but not in Chrome :hot_face:


Worsk fine in Chrome on Windows here. Have to check OSX when I get home.


Works fine on chrome OSX s well:


Thanks @LinusBorg!

I believe you haha, but for some reason it doesn’t work in my Chrome.

Anyway, this solution seems very good!