vue-share-element vue共享元素 vue动画路由跳转

vue-share-element

npm:https://www.npmjs.com/package/vue-share-element

效果

简介

vue-share-element基于vue的单界面路由动画跳转插件。

使用 共享元素的方式 给路由跳转增加动画。

安装

npm install vue-share-element

引用

import shareElement from "vue-share-element";
Vue.use(shareElement);
// 自定义参数 Vue.use(shareElement,{ duration: 600, zIndex: 20001 });

duration：过渡动画时间，默认600zIndex：共享元素层级，默认20001

使用 router-view

包裹 router-view 使 路由跳转 增加动画。

startType 是 router-view 跳转动画类型:

start-def：淡入淡出(默认)start-top：上下浮动

设置共享元素（一对一）

页面1 元素设置

// $router.push('/page2')

页面2 元素设置

// $router.push('/page1')||$router.go(-1)

share-key：共享元素key与当前元素key一致（必须）ref：必须为share，便 vue-share-element 查找（必须）

设置共享元素（多对一）

页面1 元素设置