Mixing
Fixed elements jump on screen when using transitions in vuejs
2
When using transitions between routes in vue it seems fixed or absolute elements only move to their positions after the transition has completed leading to a jump after animation. Is this perhaps a bug?
Heres a codepen example:
https://codepen.io/anon/pen/ebyOYx
HTML:
<div id="app"></div>
<template id="root-template">
<div class="routes">
<nav>
<router-link to="/" exact>Home</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<transition name="slide-left" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<template id="home-template">
<div class="page">
<h1>Home Page</h1>
Go to the Contact page and notice the fixed toolbar jumping after transition
</div>
</template>
<template id="contact-template">
<div class="page">
<h1>Contact Page</h1>
<div class="toolbar">
Toolbar
</div>
</div>
</template>
<template id="404-template">
<div class="page">
<h1>404 Not Found</h1>
</div>
</template>
JAVASCRIPT:
const HomePage = {
name: 'HomePage',
template: '#home-template'
}
const ContactPage = {
name: 'ContactPage',
template: '#contact-template'
}
const NotFoundPage = {
name: 'NotFoundPage',
template: '#404-template'
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/contact', component: ContactPage },
{ path: '*', component: NotFoundPage },
]
const router = new VueRouter({
base: '/rugor/debug/VKgoRK/', // codepen specific base
routes
})
new Vue({
router,
template: '#root-template'
}).$mount('#app')
vue.js routes transition
asked Jan 1 at 19:06
MrRedMrRed
157211
add a comment |
2
When using transitions between routes in vue it seems fixed or absolute elements only move to their positions after the transition has completed leading to a jump after animation. Is this perhaps a bug?
Heres a codepen example:
https://codepen.io/anon/pen/ebyOYx
HTML:
<div id="app"></div>
<template id="root-template">
<div class="routes">
<nav>
<router-link to="/" exact>Home</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<transition name="slide-left" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<template id="home-template">
<div class="page">
<h1>Home Page</h1>
Go to the Contact page and notice the fixed toolbar jumping after transition
</div>
</template>
<template id="contact-template">
<div class="page">
<h1>Contact Page</h1>
<div class="toolbar">
Toolbar
</div>
</div>
</template>
<template id="404-template">
<div class="page">
<h1>404 Not Found</h1>
</div>
</template>
JAVASCRIPT:
const HomePage = {
name: 'HomePage',
template: '#home-template'
}
const ContactPage = {
name: 'ContactPage',
template: '#contact-template'
}
const NotFoundPage = {
name: 'NotFoundPage',
template: '#404-template'
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/contact', component: ContactPage },
{ path: '*', component: NotFoundPage },
]
const router = new VueRouter({
base: '/rugor/debug/VKgoRK/', // codepen specific base
routes
})
new Vue({
router,
template: '#root-template'
}).$mount('#app')
vue.js routes transition
asked Jan 1 at 19:06
MrRedMrRed
157211
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32
add a comment |
2
2
2
When using transitions between routes in vue it seems fixed or absolute elements only move to their positions after the transition has completed leading to a jump after animation. Is this perhaps a bug?
Heres a codepen example:
https://codepen.io/anon/pen/ebyOYx
HTML:
<div id="app"></div>
<template id="root-template">
<div class="routes">
<nav>
<router-link to="/" exact>Home</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<transition name="slide-left" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<template id="home-template">
<div class="page">
<h1>Home Page</h1>
Go to the Contact page and notice the fixed toolbar jumping after transition
</div>
</template>
<template id="contact-template">
<div class="page">
<h1>Contact Page</h1>
<div class="toolbar">
Toolbar
</div>
</div>
</template>
<template id="404-template">
<div class="page">
<h1>404 Not Found</h1>
</div>
</template>
JAVASCRIPT:
const HomePage = {
name: 'HomePage',
template: '#home-template'
}
const ContactPage = {
name: 'ContactPage',
template: '#contact-template'
}
const NotFoundPage = {
name: 'NotFoundPage',
template: '#404-template'
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/contact', component: ContactPage },
{ path: '*', component: NotFoundPage },
]
const router = new VueRouter({
base: '/rugor/debug/VKgoRK/', // codepen specific base
routes
})
new Vue({
router,
template: '#root-template'
}).$mount('#app')
vue.js routes transition
asked Jan 1 at 19:06
MrRedMrRed
157211
When using transitions between routes in vue it seems fixed or absolute elements only move to their positions after the transition has completed leading to a jump after animation. Is this perhaps a bug?
Heres a codepen example:
https://codepen.io/anon/pen/ebyOYx
HTML:
<div id="app"></div>
<template id="root-template">
<div class="routes">
<nav>
<router-link to="/" exact>Home</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<transition name="slide-left" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<template id="home-template">
<div class="page">
<h1>Home Page</h1>
Go to the Contact page and notice the fixed toolbar jumping after transition
</div>
</template>
<template id="contact-template">
<div class="page">
<h1>Contact Page</h1>
<div class="toolbar">
Toolbar
</div>
</div>
</template>
<template id="404-template">
<div class="page">
<h1>404 Not Found</h1>
</div>
</template>
JAVASCRIPT:
const HomePage = {
name: 'HomePage',
template: '#home-template'
}
const ContactPage = {
name: 'ContactPage',
template: '#contact-template'
}
const NotFoundPage = {
name: 'NotFoundPage',
template: '#404-template'
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/contact', component: ContactPage },
{ path: '*', component: NotFoundPage },
]
const router = new VueRouter({
base: '/rugor/debug/VKgoRK/', // codepen specific base
routes
})
new Vue({
router,
template: '#root-template'
}).$mount('#app')
vue.js routes transition
vue.js routes transition
asked Jan 1 at 19:06
MrRedMrRed
157211
asked Jan 1 at 19:06
MrRedMrRed
157211
asked Jan 1 at 19:06
MrRedMrRed
157211
asked Jan 1 at 19:06
MrRedMrRed
157211
asked Jan 1 at 19:06
MrRedMrRed
157211
157211
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32
add a comment |
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32
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%2f53998178%2ffixed-elements-jump-on-screen-when-using-transitions-in-vuejs%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%2f53998178%2ffixed-elements-jump-on-screen-when-using-transitions-in-vuejs%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
I have the same problem. Did you find a solution?
– Angus Simons
Feb 13 at 15:32