Shared Element Transitions in Vue : how to transition between related elements in distinct views on route...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
How to transition between two elements defined in two distinct views on route change, often called "Shared transitions" or "Native-like transitions" of pages elements across multiple pages layouts ?
Here are some examples :
Shared Element Transitions in airbnb/native-navigation (React)
Animation Anchoring (Angular)
Common solutions are faking this effect by using distinct elements outside the pages flow or by overlaying the elements across layouts and using voluntary voids and absolute positioning that take into account the overlays spaces to give the impression that the element is built into the natural page flow. See for example Native-Like Animations for Page Transitions on the Web (see comment) or snipcart/vue-blog-demo.
A Shared Element Transition would create a relation between two elements defined separately in distinct views with different pages layouts, and would transition between them, probably in a kind of FLIP way.
vue.js transition vue-router shared-element-transition vuepress
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
add a comment |
How to transition between two elements defined in two distinct views on route change, often called "Shared transitions" or "Native-like transitions" of pages elements across multiple pages layouts ?
Here are some examples :
Shared Element Transitions in airbnb/native-navigation (React)
Animation Anchoring (Angular)
Common solutions are faking this effect by using distinct elements outside the pages flow or by overlaying the elements across layouts and using voluntary voids and absolute positioning that take into account the overlays spaces to give the impression that the element is built into the natural page flow. See for example Native-Like Animations for Page Transitions on the Web (see comment) or snipcart/vue-blog-demo.
A Shared Element Transition would create a relation between two elements defined separately in distinct views with different pages layouts, and would transition between them, probably in a kind of FLIP way.
vue.js transition vue-router shared-element-transition vuepress
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52
add a comment |
How to transition between two elements defined in two distinct views on route change, often called "Shared transitions" or "Native-like transitions" of pages elements across multiple pages layouts ?
Here are some examples :
Shared Element Transitions in airbnb/native-navigation (React)
Animation Anchoring (Angular)
Common solutions are faking this effect by using distinct elements outside the pages flow or by overlaying the elements across layouts and using voluntary voids and absolute positioning that take into account the overlays spaces to give the impression that the element is built into the natural page flow. See for example Native-Like Animations for Page Transitions on the Web (see comment) or snipcart/vue-blog-demo.
A Shared Element Transition would create a relation between two elements defined separately in distinct views with different pages layouts, and would transition between them, probably in a kind of FLIP way.
vue.js transition vue-router shared-element-transition vuepress
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
How to transition between two elements defined in two distinct views on route change, often called "Shared transitions" or "Native-like transitions" of pages elements across multiple pages layouts ?
Here are some examples :
Shared Element Transitions in airbnb/native-navigation (React)
Animation Anchoring (Angular)
Common solutions are faking this effect by using distinct elements outside the pages flow or by overlaying the elements across layouts and using voluntary voids and absolute positioning that take into account the overlays spaces to give the impression that the element is built into the natural page flow. See for example Native-Like Animations for Page Transitions on the Web (see comment) or snipcart/vue-blog-demo.
A Shared Element Transition would create a relation between two elements defined separately in distinct views with different pages layouts, and would transition between them, probably in a kind of FLIP way.
vue.js transition vue-router shared-element-transition vuepress
vue.js transition vue-router shared-element-transition vuepress
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
edited Nov 16 '18 at 20:41
nliautaud
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
asked Jul 31 '18 at 14:03
nliautaudnliautaud
389
389
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52
add a comment |
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52
add a comment |
1 Answer
1
active
oldest
votes
The library vue-overdrive simulate such transition between distinct components by using Ramjet.
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
add a comment |
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
});
}
});
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%2f51615274%2fshared-element-transitions-in-vue-how-to-transition-between-related-elements-i%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The library vue-overdrive simulate such transition between distinct components by using Ramjet.
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
add a comment |
The library vue-overdrive simulate such transition between distinct components by using Ramjet.
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
add a comment |
The library vue-overdrive simulate such transition between distinct components by using Ramjet.
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
The library vue-overdrive simulate such transition between distinct components by using Ramjet.
Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
answered Nov 16 '18 at 20:50
nliautaudnliautaud
389
389
add a comment |
add a comment |
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.
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%2f51615274%2fshared-element-transitions-in-vue-how-to-transition-between-related-elements-i%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
This is exactly what you want: github.com/snipcart/vue-blog-demo
– Jose FG
Jul 31 '18 at 14:26
@JoseFG It seems to me that there is no "targeted" transition : the animated elements are defined once outside the BlogPost layout, by using the (filtered) posts list as hero image (github.com/snipcart/vue-blog-demo/blob/master/src/components/…) The image is thus not defined in the post layout github.com/snipcart/vue-blog-demo/blob/master/src/components/…, and the final layout has to be constructed without embedding the hero image, by using absolute or fixed positions to take the image space into account.
– nliautaud
Jul 31 '18 at 16:18
@JoseFG I edited the question with more precisions about that.
– nliautaud
Jul 31 '18 at 16:52