Disable dialog open/close animation ?

  • Hi,
    Is there a way to remove the animation when a dialog is opened by calling the Dialog.create() function and when it closes as well?

  • Admin

    Use the name prop and set it to something bogus.

  • @rstoenescu
    I’m not sure if I’m missing something. There’s no “name” prop on the Dialog component. How can I set it?

  • I think Razvan means the “name” prop for the transition itself, which is a child component of modal, which is used in the dialog component.


  • That’s not confusing at all, is that? :)) I’m still new to Vue and not sure how to do that, but I will try to work it out myself.

    My current hack is overriding the following css in the parent component of the dialog so the animation is less.

     .modal, .modal-content {
            transition: all 0.02s linear;

    Would be nice to be able to customise all animation in the framework.

    Thank you for your response!

  • I think a better place to put my overriding css is in the themes/app.mat.styl or themes/app.ios.styl

    // This file is included in the build if src/main.js imports it.
    // Otherwise the default Material CSS file is bundled.
    // Check "DEFAULT / CUSTOM STYLE" in src/main.js
    // App Shared Variables
    // --------------------------------------------------
    // Shared Stylus variables go in the app.variables.styl file
    @import 'app.variables'
    // App Material Design Variables
    // --------------------------------------------------
    // Material Design only Stylus variables can go here
    // http://quasar-framework.org/api/css-stylus-variables.html
    $typography-font-family     ?= 'Roboto'
    $toolbar-color              ?= white
    $toolbar-background         ?= $primary
    $toolbar-active-color       ?= $primary
    $toolbar-faded-color        ?= composite-color($primary)
    // Quasar Material Design Stylus
    // --------------------------------------------------
    // Custom App variables must be declared before importing Quasar.
    // Quasar will use its default values when a custom variable isn't provided.
    @import '~quasar-framework/dist/quasar.mat.styl'
    // --------------------------------------------------
    .modal, .modal-content
      transition none

  • <q-dialog  transition-show="none" transition-hide="none" 
    v-model="loadingDialog" persistent maximized></q-dialog>

Log in to reply