Encountering an issue with the combination of nuxt/vue-router page-transitions and the JavaScript method rerequestAnimationFrame. Currently, I am animating a container of items using rerequestAnimationFrame along with the transform: translate CSS property. Here's a snippet of the code:
const step = timestamp => {
itemContainer.style.transform =
'translateX(' + this.animationStep * -1 + '%)'
this.animationStep = this.animationStep + 1
if (this.interrupt) window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)
The issue arises when clicking on a nuxt-link while the animation is in progress. The router is triggered but the page transition fails to execute, resulting in the subpage being displayed abruptly without any smooth transition between pages.
Removing the requestAnimationFrame loop allows the page-transition to be triggered properly along with all other events such as beforeLeave.
Attempts were made to set the this.interrupt property to false upon clicking an element or the container by adding an onclick event, however, this approach did not yield the desired result. It seems that every router action is executed before the next animation frame.
Is there a solution to ensure that the router and transition actions are only executed after the animation frame has completed? Alternatively, is there another method for triggering the transition correctly under these circumstances?
Any insights or suggestions would be greatly appreciated!