Hi, this is my first time on the Vue forum!
I’ve been using
vue-router to create some expanding & contracting page transitions:
More info and code here
They seem to be working as expected. However, I also want to use simpler ‘slide’ transitions in other parts of the website: the old page slides to the left, while the new page slides in from the right. As I’m wrapping my site’s whole
<router-view> with my page transition component, I’m using the same approach for the slide transitions as I used for the ‘expand’ transitions.
For the above example, I’m using
mode="in-out" because the new page should appear before the old page leaves. For the ‘slide’ transitions, I want to use the default (simultaneous) transition mode.
When I tried this, the pages would first animate correctly, and then when the
leave hook finished, the
requestAnimationFrame loop in
enter would start from zero again.
I made a simpler version of the code (without vue-router) to show the issue more clearly, just using a couple of divs. Try switching between
mode="out-in", mode=“in-out”, and
I’ve set a really long duration so that you can see the
enter methods happening in the console. (“pink leaving”, “blue entering”, “pink left”, “blue entered”)
When I log the
progress of my rAF loop in the
enter method, I can see where the problem occurs:
... 0.9813333333333333 0.987 0.9923333333333333 pink left 0 0.006 0.012 ...
It looks to me like the
leave method finishing is somehow stopping the
enter method from completing, and starting
progress from zero again. But I don’t know how to fix the issue.
This is my first time using
requestAnimationFrame, so I may have missed something obvious. Any ideas?