Vue.js的声明式共享元素过渡 - v-shared-element

Vue.js的声明式共享元素过渡 - v-shared-element
插件名称 v-shared-element
版本号 v3.1.0
发布时间 2020年12月30日
插件作者 justintaddei

Vue.js页面之间的声明式共享元素过渡。

安装和下载:

# Yarn
$ yarn add v-shared-element

# NPM
$ npm i v-shared-element

基本用法:

1.导入并注册组件。

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

2.将v-shared-element组件添加到应用模板。

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

3.基本示例。

<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.所有可能的选项。

/**
 * CSS 简单函数
 * @default "ease"
 */
easing: string
/**
 * CSS duration
 * @default "300ms"
 */
duration: string
/**
 * CSS持续时间,控制动画的“淡出”阶段,以将克隆节点与真实节点混合。设置为“0s”以禁用
 * @default "150ms"
 */
endDuration: string | false
/**
 * 设置为“true”将仅将动画限制为“transform”和“opacity”
 * @default false
 */
compositeOnly: boolean
/**
 * 动画期间用于元素的z-index
 * @default 1
 */
zIndex: number
/**
 * 如果“true”,则子节点将包含在动画中
 * @default false
 */
includeChildren: boolean
/**
 * 如果“false”并且我们正在转换**到**的元素有一个透明的背景,那么我们正在转换的元素将淡出。
 * 如果“true”,元素背景的透明度将被忽略。这也可以是应该忽略的标记名数组(例如,`['img','button']`)。
 * @default ['img']
 */
ignoreTransparency: boolean | string[]
/**
 * 将此设置为“true”将禁用当前页上的所有共享元素**unless**它们在窗口中。
 * @default false
 */
restrictToViewport: boolean
/**
 * 防止共享元素进入克隆阶段,除非满足以下条件之一:
 *
 * 如果“restrictToRoutes”是任何数组,并且即将到来的路由的“path”与该数组中的某个项匹配。或者,如果“restrictToRoutes”是一个函数,并且该函数返回true。
 *
 *
 * ---
 *
 * 将“restrictToRoutes”设置为“false”将完全禁用此行为。
 *
 * ---
 *
 * @default
 * false
 *
 * @example
 * ```html
 * <button
 *  v-shared-element:id="{
 *    restrictToRoutes(to, from, id) {
 *      return id === to.params.productId
 *    }
 *  }">点击我</button>
 * ```
 */
restrictToRoutes: false | string[] | ((to: Route, from: Route, id: string) => boolean)

变更日志:

v3.1.0 (07/08/2021)

  • 添加了对 Vue 3 的支持