nbonamy/vue-hero-transition

Custom transition between routes based on "hero" content.

Vue Hero Transition

Description

Custom transitions between routes based on "hero" content.

Demo: http://bonamy.fr/vue-hero-transition/

Usage

import Hero from 'vue-hero-transition';
Vue.use(Hero);

Wrap your view-router with HeroTransition:

<HeroTransition>
  <router-view></router-view>
</HeroTransition>

Then wrap elements on source and target routes with Hero. Required attribute tag should match:

<Hero tag="tag">
...
</Hero>

Parameters

HeroTransition accepts the following parameters:

Name	Purpose	Default
duration	Transition duration in CSS format	500ms
backSupport	Enable transition on router.pop	true