CODEWITHSUNDEEP
vuetify.js
RobDil
RobDil

Reputation: 4544

Callback after dialog transition has finished

Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished?

https://codepen.io/anon/pen/qKNNLw

<v-dialog v-model="dialog" persistent max-width="200">
  <v-btn slot="activator">Open</v-btn>
  <v-card>
    <v-card-text>Thank you!</v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn flat @click.native="dialog = false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

Vuejs describes some Javascript callbacks here: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks Is it possible to use them somehow?

My first idea was to set the dialog transition attribute to false and wrap it with a custom transition but this does not seem to work (disabling transition works but adding my own did not), maybe due to the underlying structure generated by Vuetify.

Background: I render a Google map inside the dialog that needs to resize after reaching full size.

Upvotes: 2

Views: 2970

Answers (1)

Paul Rdt
Paul Rdt

Reputation: 89

This issue is being treated in v1.2.x milestone of Vuetify : Heres the issue

You may consider recreating the modal wrapping it with the proper vuejs hooks as well.

Upvotes: 1

Related Questions