shared-element-transitions

English | 中文

Shared element transitions between routers for React, Vue, Angular and Web applications. Idea from Hero Animations of Flutter, and other mobile applications.

Install

React

yarn add react-shared-element

Vue

yarn add vue-shared-element

Use

Both routes use the SharedElement component and the id must to be the same. It can be a dynamic id and supports asynchronous.

React

Step1:

import SharedElement from "react-shared-element"

Step2:

<SharedElement ref={this.ref} id='shared-id-123'>
    Content of Component1
</SharedElement>

Step3:

<div onClick={e => {
    this.ref.current.redirect(() => this.props.history.push("/component2"))
}}>Go Component2</div>

Vue

Step1:

import SharedElement from "vue-shared-element"

Step2:

<shared-element ref="sharedElement" id="shared-id-123">
    <div v-on:click="redirect">Go Home</div>
</shared-element>

Step3:

<script>
import router from "../router"
import SharedElement from "vue-shared-element"

export default {
  components: {
    "shared-element": SharedElement
  },
  methods: {
    redirect: function() {
      this.$refs.sharedElement.redirect(() => router.push({ name: "home" }))
    }
  }
}
</script>

Parameters

name	type	default	required
id	string	null	required
duration	number	300	optional
zindex	number	1	optional

Enjoy coding!