add layout transitions #1620

homerjam · 2017-09-08T17:14:38Z

This PR introduces layout transitions (#1519). It would be great to get some feedback/input to get them sorted.

pi0 · 2017-09-08T17:20:37Z

Thanks, @homerjam ! Would you please enable some layer transitions in tests/fixtures/with-config? There is no coverage to test template conditions now.

pi0 · 2017-09-08T17:22:12Z

examples/layout-transitions/pages/users.vue

+    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
+  },
+  async asyncData ({ query }) {
+    const page = +query.page || 1


Nice trick to handle nulls :D But doesn't it always resolve to 1 (I mean 0 or null are both falsy values) so maybe can be simplified without +

Yup you're almost certainly right : )

I copied the example from route transitions!

homerjam · 2017-09-08T23:22:08Z

I'll absolutely give the tests a go when the feature is nailed. Right now the page transitions do not work - I've been trying all sorts to trigger them. According to the docs nested transitions should be triggered by a key value attached to the target component. In practice I can't seem to get it to work?

homerjam · 2017-09-09T11:45:53Z

Hi @pi0 I've added the layoutTransition option to the with-config tests. Hopefully this is all ok now?

In future it'd obviously be great to be able to override the layoutTransition from page components but I shouldn't think that would be a breaking change. If you can suggest a way to bind the <transition :name="" :mode=""> in App.vue to a dynamic property (one that we can update from pages) then I'll take a look. For now this covers my needs.

homerjam · 2017-09-09T11:52:45Z

lib/app/components/nuxt.vue

@@ -1,6 +1,8 @@
 <template>
-  <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
-  <nuxt-child :key="routerViewKey" v-else></nuxt-child>
+  <div class="nuxt">


I had to wrap these components to fix page transitions ¯_(ツ)_/¯

Atinux · 2017-09-11T09:52:44Z

lib/app/App.vue

@@ -1,7 +1,9 @@
 <template>
  <div id="__nuxt">
    <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
-    <component v-if="layout" :is="nuxt.err ? 'nuxt' : layout"></component>
+    <% if (layoutTransition) { %><transition name="<%= layoutTransition.name %>" mode="<%= layoutTransition.mode %>"><% } %>


I believe we should always add the <transition> if we want to be able to add layoutTransition into layouts.

Do you mean we should always have <transition> even if no layoutTransition is set (so remove the conditional render from the template)?

Or do you mean the <transition> should be added by the user into layout template? This would present an issue with the way layouts work at the moment. The only resolution would be a programatic transition, similar to the one used by pages in nuxt-child.

I mean always transition and have default layout transition (like for pages, so the user can add .layout-enter { ... } in css to add an animation :))

Atinux · 2017-09-11T09:54:24Z

Hi @homerjam

I tried indeed to add layout transition but I had the same result as you, the page transitions were broken too.

Could you also see my review and see why the tests are failing?

homerjam · 2017-09-11T16:55:05Z

@Atinux The page transitions are working now - I spent hours trying different things before finally wrapping the nuxt-child and nuxt-error components which fixed it.

AFAIK the tests are failing because of a separate issue:

basic.generate › /validate?valid=true
  /home/travis/build/nuxt/nuxt.js/test/basic.generate.test.js:110
   109:   const html = window.document.body.innerHTML
   110:   t.true(html.includes('I am valid</h1>'))   
   111: })                                           
  Value is not `true`:

I had a quick look and it seems like that test needs some attention, it's broken running against current dev branch.

Atinux · 2017-09-12T11:37:10Z

I will do more tests on it, you did an amazing job there @homerjam

homerjam · 2017-09-12T11:51:43Z

Awesome! Thanks for merging. Should I alter the conditional <transition> in App.vue?

Atinux · 2017-09-12T11:55:31Z

I'll do it :)

IamManchanda · 2017-10-20T16:48:09Z

Any updates on getting this released soon?

homerjam · 2017-10-20T17:10:46Z

You can use it now if you install from github!

…

On 20 Oct 2017 17:48, "Harry Manchanda" ***@***.***> wrote: Any updates on getting this released soon? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1620 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABAcGb2EpYCLWTcGt0BA6a_8Anoi7aHBks5suM7OgaJpZM4PRdYB> .

ckpiggy · 2017-12-20T17:04:17Z

@homerjam I trace the layout transition issue to here.
How should I install nuxt from github?
I run npm install nuxt/nuxt.js --save and run nuxt -p 3001 and there is a message complain about no pages directory.

homerjam · 2017-12-20T17:08:32Z

@ckpiggy npm i -S nuxt@next will install 'next' version of nuxt or npm i -S github:nuxt/nuxt.js#dev from github (you can swap dev with a commit hash too).

homerjam · 2017-12-20T17:10:07Z

Oh and you probably want to use the starter project for initial setup - that will create pages directory etc

chasebank · 2018-01-19T20:03:14Z

Hey @homerjam is there still something special that needs to be done for this after v1.0? I'm having trouble getting this working.

homerjam · 2018-01-22T17:19:30Z

It should be working (I’ve tested and it does for me). Can you post a minimal version of what you have that’s failing?

…

On 19 Jan 2018, 20:03 +0000, Chase Whiteside ***@***.***>, wrote: Hey @homerjam is there still something special that needs to be done for this after v1.0? I'm having trouble getting this working. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

chasebank · 2018-01-22T22:37:37Z

Yeah sorry, somehow I missed that the layout- transition hook just works as is. I was trying to set the layoutTransition in the layout files, like you can do for pages, but then found the layout transition example in the examples directory.

I did notice something though. When using both layout and page transitions, the page-enter hooks still fire during a layout-leave transition. The consequence is the new page is temporarily mounted twice; once in the exiting layout, and a second (the correct one) in the incoming layout. Took me a while to figure out what was going on..

https://pumped-eye.glitch.me/

For now I think I've solved it with

.layout-leave-to .page-enter-active {
  display: none;
}

Why that's happening makes sense, now that I know... but I can't think of any reason it would be an intended behavior. So I wonder if there's not some easy way to fix that by default. That's my first time working with nested transitions.

Edit: Forgot to also ask, am I correct that you cannot set the layout transition in each layout? That's unfortunate if true, because then you can't adjust the transition hooks conditionally. If we can only set it in the nuxt.config, as far as I can tell, there's no way to access the vuex state there? Which means the transition has no awareness of the rest of the app. Very limiting when compared to page transitions.

homerjam · 2018-01-22T23:02:50Z

@chasebank could be related to #1737 - I have a very similar issue in one of my projects when using nuxt-child. I think the solution will be to somehow prevent the nested transitions from running - perhaps adding a hook to the nuxt/nuxt-child components to check if there is an active parent transition.

chasebank · 2018-01-22T23:11:16Z

Apparently there used to be transition.abort() which may have had some relevance, but looks like it was deprecated.

vuejs/vue-router#295

lock · 2018-11-01T04:05:43Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

pi0 requested a review from Atinux September 8, 2017 17:20

pi0 reviewed Sep 8, 2017

View reviewed changes

homerjam added 3 commits September 9, 2017 12:19

add layout transitions

e937937

fix page transitions

2bf0273

remove unnecessary plus

ad09857

homerjam force-pushed the layout-transitions branch from 437f01c to ad09857 Compare September 9, 2017 11:23

add layoutTransition to with-config test

9dd3c7f

homerjam commented Sep 9, 2017

View reviewed changes

Atinux reviewed Sep 11, 2017

View reviewed changes

Atinux merged commit dcf3593 into nuxt:dev Sep 12, 2017

homerjam mentioned this pull request Sep 12, 2017

Add support for layout transitions #1519

Closed

qm3ster mentioned this pull request Sep 22, 2017

The error in basic.generate.test/validate #1705

Closed

homerjam mentioned this pull request Jan 22, 2018

Route transitions do not work inside nuxt-child #1737

Closed

lock bot locked as resolved and limited conversation to collaborators Nov 1, 2018

danielroe added the 2.x label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add layout transitions #1620

add layout transitions #1620

homerjam commented Sep 8, 2017 •

edited

pi0 commented Sep 8, 2017

pi0 Sep 8, 2017 •

edited

homerjam Sep 8, 2017

homerjam commented Sep 8, 2017 •

edited

homerjam commented Sep 9, 2017 •

edited

homerjam Sep 9, 2017

Atinux Sep 11, 2017

homerjam Sep 11, 2017

Atinux Sep 12, 2017 •

edited

Atinux commented Sep 11, 2017

homerjam commented Sep 11, 2017 •

edited

Atinux commented Sep 12, 2017

homerjam commented Sep 12, 2017

Atinux commented Sep 12, 2017

IamManchanda commented Oct 20, 2017

homerjam commented Oct 20, 2017 via email

ckpiggy commented Dec 20, 2017

homerjam commented Dec 20, 2017

homerjam commented Dec 20, 2017

chasebank commented Jan 19, 2018

homerjam commented Jan 22, 2018 via email

chasebank commented Jan 22, 2018 •

edited

homerjam commented Jan 22, 2018

chasebank commented Jan 22, 2018

lock bot commented Nov 1, 2018

add layout transitions #1620

add layout transitions #1620

Conversation

homerjam commented Sep 8, 2017 • edited

pi0 commented Sep 8, 2017

pi0 Sep 8, 2017 • edited

Choose a reason for hiding this comment

homerjam Sep 8, 2017

Choose a reason for hiding this comment

homerjam commented Sep 8, 2017 • edited

homerjam commented Sep 9, 2017 • edited

homerjam Sep 9, 2017

Choose a reason for hiding this comment

Atinux Sep 11, 2017

Choose a reason for hiding this comment

homerjam Sep 11, 2017

Choose a reason for hiding this comment

Atinux Sep 12, 2017 • edited

Choose a reason for hiding this comment

Atinux commented Sep 11, 2017

homerjam commented Sep 11, 2017 • edited

Atinux commented Sep 12, 2017

homerjam commented Sep 12, 2017

Atinux commented Sep 12, 2017

IamManchanda commented Oct 20, 2017

homerjam commented Oct 20, 2017 via email

ckpiggy commented Dec 20, 2017

homerjam commented Dec 20, 2017

homerjam commented Dec 20, 2017

chasebank commented Jan 19, 2018

homerjam commented Jan 22, 2018 via email

chasebank commented Jan 22, 2018 • edited

homerjam commented Jan 22, 2018

chasebank commented Jan 22, 2018

lock bot commented Nov 1, 2018

homerjam commented Sep 8, 2017 •

edited

pi0 Sep 8, 2017 •

edited

homerjam commented Sep 8, 2017 •

edited

homerjam commented Sep 9, 2017 •

edited

Atinux Sep 12, 2017 •

edited

homerjam commented Sep 11, 2017 •

edited

chasebank commented Jan 22, 2018 •

edited