v shared element are shared cross-page element meta transitions for Vue.js.

shared element transition, shared element transition api, shared element transition android github, react navigation shared element, vue shared element transition

How to make use of it:

Install and download:

# Yarn
$ yarn add v-shared-element

# NPM
$ npm i v-shared-element

1. Import and register the component.

import Vue from 'vue'
import {
  SharedElementRouteGuard,
  SharedElementDirective
} from 'v-shared-element'

import Vue from 'vue'
import {
  SharedElementRouteGuard,
  SharedElementDirective
} from 'v-shared-element'
Vue.use(SharedElementDirective)
const router = new VueRouter({ ... })
router.beforeEach(SharedElementRouteGuard)

2. Add the v-shared-element component to the application form.

<div v-shared-element:namespace></div>

3. A basic example.

<template>
  <div>
    <h1>Contacts</h1>
    <ul>
      <li
        v-for="contact in contacts"
        :key="contact.id"
      >
        <img
          :src="contact.profile"
          v-shared-element:[contact.id]
        />
        <span>{{ contact.name }}</span>
      </li>
    </ul>
  </div>
</template>

export default {
  data() {
    return {
      contacts: [
        {
          id: '123',
          profile: '/path/to/',
          name: 'Vuescript'
        },
        ...
      ]
    }
  }
}

4. All possible options.

/**
 * CSS easing function
 * @default "ease"
 */
easing: string
/**
 * CSS duration
 * @default "300ms"
 */
duration: string
/**
 * CSS duration that controls
 * the "fade-out" stage of the animation
 * to blend the cloned node with the real one.
 * Set to `"0s"` to disable
 * @default "150ms"
 */
endDuration: string | false
/**
 * Setting to `true` will limit animations to `transform` and `opacity` only
 * @default false
 */
compositeOnly: boolean
/**
 * The z-index used for elements during the animation
 * @default 1
 */
zIndex: number
/**
 * If `true`, child nodes will be included in the animation
 * @default false
 */
includeChildren: boolean
/**
 * If `false` and the element we're transitioning **to** has a transparent background then
 * the element we're transitioning from will fade out.
 * If `true` the transparency of the element's background will be ignored.
 *
 * This can also be an array of tag names that should be ignored (e.g. `['img', 'button']`).
 * @default ['img']
 */
ignoreTransparency: boolean | string[]
/**
 * Setting this to `true` will disable any shared-elements on the
 * current page **unless** they are in the viewport.
 * @default false
 */
restrictToViewport: boolean
/**
 * Prevents the shared-element from entering the cloning phase unless one of the following is true:
 *
 * If `restrictToRoutes` is any array and the `path` of the upcoming route matches an item
 * in that array.
 *
 * Or, if `restrictToRoutes` is a function and that function that returns true.
 *
 *
 * ---
 *
 * Setting `restrictToRoutes` to `false` disables this behavior completely.
 *
 * ---
 *
 * @default
 * false
 *
 * @example
 * ```html
 * <button
 *  v-shared-element:id="{
 *    restrictToRoutes(to, from, id) {
 *      return id === to.params.productId
 *    }
 *  }">Click me</button>
 * ```
 */
restrictToRoutes: false | string[] | ((to: Route, from: Route, id: string) => boolean)

Declarative Shared-element Transitions, v-shared-element Plugin/Github

See Demo And Download

Official Website(justintaddei): Click Here

This superior jQuery/javascript plugin is developed by justintaddei. For extra Advanced Usage, please go to the official website.