How to disable animation on components

  • Hi!

    How can I disable select’s q-popover animation? with lots of options it feels sluggish on mobile.


  • The animate class is hard coded into the component source, but you could override the CSS for the popover with this line:

    .q-popover.animate-scale {
        animation: none;

  • Hi @a47ae, that worked perfectly! I’ll do the same for other animations, thanks!

  • Glad it worked, but keep in mind that in future versions the animate-scaleclass name could change so keep an eye on this.

  • @rstoenescu could we have a prop for that in all animated components please?
    e.g. adding no-animation to a component would do that css override (or anything else appropriate internally to forfeit the animation effect)

    or maybe animation="none" if you plan on later allowing custom animations to be set through that same prop ( /wink /wink /nudge /nudge )

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.