https://github.com/posva/vue-router-view-transition

Properly time out-in transitions with scrollBehavior
https://github.com/posva/vue-router-view-transition

animation transition vue vue-router

Last synced: 19 days ago
JSON representation

Properly time out-in transitions with scrollBehavior

• Host: GitHub
• URL: https://github.com/posva/vue-router-view-transition
• Owner: posva
• Created: 2019-08-08T17:11:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-08T09:39:23.000Z (over 4 years ago)
• Last Synced: 2024-04-27T07:32:45.306Z (7 months ago)
• Topics: animation, transition, vue, vue-router
• Language: JavaScript
• Homepage: https://vue-router-transition-scrollbehavior.esm.dev
• Size: 155 KB
• Stars: 40
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-router-view-transition [![Build Status](https://badgen.net/circleci/github/posva/vue-router-view-transition)](https://circleci.com/gh/posva/vue-router-view-transition) [![npm package](https://badgen.net/npm/v/vue-router-view-transition)](https://www.npmjs.com/package/vue-router-view-transition) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)

> A transition wrapper for router-view that is compatible with scrollBehavior

## Installation

```sh

npm install vue-router-view-transition

# or

yarn add vue-router-view-transition

```

## Usage

This library exports one component and one function. You need to use both:

First, you can either globally install the component `RouterViewTransition`:

```js

import { RouterViewTransition } from 'vue-router-view-transition'

Vue.component('RouterViewTransition', RouterViewTransition)

```

or import it locally in any Vue component:

```js

import { RouterViewTransition } from 'vue-router-view-transition'

export default {

  components: { RouterViewTransition },

}

```

Then you should replace your `router-view` with this `router-view-transition`:

```vue

```

Here the `transition` prop refers to the _name_ of the transition (prop named `name` for the `transition` component) while the `mode` is exactly the same as the prop with the same name in the `transition` component.

Then you must import the `waitForTransition` function and wrap your `scrollBehavior` function:

```js

// probably your router.js file

const router = new Router({

  mode: 'history',

  routes: [

    // your routes

  ],

  scrollBehavior: waitForTransition((to, from, savedPosition) => {

    // this code will get executed only once the transition wrapping router-view is finished

    // this ensures

    if (savedPosition) {

      return savedPosition

    } else {

      // this ensures we go to the top of the page when navigating to a new page

      return { x: 0, y: 0 }

    }

  }),

})

```

**Note**: You may also want to enable _manual_ scroll restoration:

```js

history.scrollRestoration = 'manual'

```

## Related

- Vue Router: https://github.com/vuejs/vue-router

## License

[MIT](http://opensource.org/licenses/MIT)