bkwld / nuxt-page-transition-and-anchor-handler

Scroll to top before page transition, handle anchor links, and cross-dissolve between pages

nuxt-page-transition-and-anchor-handler

This package add animated scrolling to all anchor links using scrollTo. It also adds a default cross-dissolve page transition which feels faster than the normal Nuxt out-in transition. This works best when you do the second step of Install, making the page scroll to top before the transition starts.

Install

1. yarn add nuxt-page-transition-and-anchor-handler or npm install nuxt-page-transition-and-anchor-handler
2. Add nuxt-page-transition-and-anchor-handler to your modules array

If you need to support browsers that don't support ScrollToOptions give smoothscroll-polyfill a shot.

Options

Can be set with the module or in the config file under the ptah key.

• css (true) - Include the default transition styles (see transition.css)
• scrollToTopBeforePageChange (true) - Whether to explicitly and smoothly scroll to top before the page change transition.
• initialDelay (500) - How long to wait after the window.onNuxtReady event before handling the initial page anchor. This gives the page a chance to render the elements you are trying to scroll to.
• afterPageChangeDelay (0) - How long to wait after a page changing event before handling the page anchor.
• anchorSelector ([data-anchor={{anchor}}]) - The selector to scroll to. {{anchor}} will be replaced with the URL hash (minus the '#').
• transition (see source code) - The Nuxt transition object

Methods

These methods are injected globally:

• this.$scrollTo(target) - Target can be a number or a DOM element
• this.$scrollToTop() - Shorthand for this.$scrollTo(0)
• this.$scrollComplete() - Returns a Promise that resolves when the current scroll finishes
• this.$setVerticalOffset() - Set the vertical offset. You might use this when the header height changes responsively.

nuxt-page-transition-and-anchor-handler's Issues

Suggestions

If I might offer some suggestions regarding documentation:

• It could be useful to mention the npm command to install the module (npm install ...)
• After adding the async function I got an error "Cannot set property 'isTransitioning' of undefined"; should more be done?
• Would it be possible to add an example or more description to this text "Can be set with the module or in the config file under the ptah key"?
• Would it be possible to add some more text regarding the different options and methods?
• would it be possible to add some small example of the usage?

Make a server side plugin that stubs out asyncData called functions

So we don't need these conditionals: 6cb916f. Like make server side no-op for those injected functions.

Refactor to use window.scrollTo options instead of animatedScrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Specifically behavior: 'smooth'

Besides removing a dep, I'm hoping to fix an issue with that package where it scrolls up a pixel at the end.