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 Component2div>