Transitions with media queries


#1

Hi!

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

Here an example:

Thanks!


#2

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:


#3

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

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


#4

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


#5

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


#6

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


#7

Works fine on chrome OSX s well:


#8

Thanks @LinusBorg!

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

Anyway, this solution seems very good!

Thanks!