Vuetify - Dialog close / animation end handling
0
Is it possible to detect when v-dialog component animation ends? I need to execute some code after closing dialog window, and I have to wait while the dialog dissapears.
animation vue.js vuetify.js
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
add a comment |
0
Is it possible to detect when v-dialog component animation ends? I need to execute some code after closing dialog window, and I have to wait while the dialog dissapears.
animation vue.js vuetify.js
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks
– Traxo
Nov 23 '18 at 13:02
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
1
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17
add a comment |
0
0
0
Is it possible to detect when v-dialog component animation ends? I need to execute some code after closing dialog window, and I have to wait while the dialog dissapears.
animation vue.js vuetify.js
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
Is it possible to detect when v-dialog component animation ends? I need to execute some code after closing dialog window, and I have to wait while the dialog dissapears.
animation vue.js vuetify.js
animation vue.js vuetify.js
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
asked Nov 23 '18 at 12:57
Artem GrachovArtem Grachov
1
1
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks
– Traxo
Nov 23 '18 at 13:02
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
1
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17
add a comment |
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks
– Traxo
Nov 23 '18 at 13:02
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
1
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like
0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks– Traxo
Nov 23 '18 at 13:02
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like
0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks– Traxo
Nov 23 '18 at 13:02
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
1
1
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447163%2fvuetify-dialog-close-animation-end-handling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447163%2fvuetify-dialog-close-animation-end-handling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hmm I think similar question was asked for another component, but apparently you can't because it's CSS transition (depends on the component perhaps)? Likely it's fixed value like
0.3s, so you can just presume it's 300ms. If it's vue transition then you might take a look at vue transition hooks– Traxo
Nov 23 '18 at 13:02
Thanks @Traxo, I have already tried vue transition hooks without any success. And yes, this is CSS transition. It could be good idea to listen something like 'animationend' event, but Vue, unlike to Angular, does not rendering component tag, and I do not have access to modal layout. Also, I have tried to use solutions from similiar questions and I didn't got any result.
– Artem Grachov
Nov 23 '18 at 13:08
1
Possible duplicate of Callback after dialog transition has finished
– Traxo
Nov 23 '18 at 13:10
Found the question, probably same. Apparently newer feature so perhaps you need a version update.
– Traxo
Nov 23 '18 at 13:10
@Traxo thanks again; but I am using Vuetify 1.3.0. Event 'transitionend' is called in v-navigation-drawer component, but not in v-dialog. So, maybe, the best solution is to use timeout.
– Artem Grachov
Nov 23 '18 at 13:17