View Transition 视图过渡

1. Introduction 简介

This library provides a smooth and customizable view transition functionality between two DOM elements.

本库提供了两个 DOM 元素之间平滑且可定制的视图过渡功能。

2. Installation and Usage 安装与使用

CDN Import 引入

You can use the following script tag to include the library in your HTML page from a CDN:

您可以使用以下的脚本标签从 CDN 将库引入到您的 HTML 页面：

<script src="https://cdn.example.com/view-transition.js"></script>

Then, you can access the viewTransition function directly in the global scope.

然后，您可以在全局作用域中直接访问 viewTransition 函数。

Webpack Project 工程

First, install the library:

首先，安装库：

npm install view-transition

Then, import and use it in your JavaScript file:

然后，在您的 JavaScript 文件中导入并使用：

import { viewTransition } from 'view-transition';

// DOM elements
const dom1 = document.getElementById('dom1');
const dom2 = document.getElementById('dom2');

// Call the viewTransition function
viewTransition(dom1, dom2, {
  duration: 500,  // Custom animation duration (default is 300 milliseconds)
  isHideDom1: false,  // Whether to hide dom1 (default is true)
  isHideDom1Position: true,  // Whether to hide the position of dom1 (default is false)
  easing: 'linear'  // Custom easing function (default is 'ease-in-out')
})
.then((reverseFn) => {
  // Do something after the transition is complete
  console.log('Transition completed successfully!');
  // You can use `reverseFn` to reverse the animation
});

Vue Demo 示例

<template>
	<button @click="toggle" ref="btn">Toggle</button>
	<CardDetail v-if="show" ref="card"></CardDetail>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { viewTransition } from "view-transition";
const show = ref(false);
const card = ref(null);
const btn = ref(null);
let rvtFn = null;
function toggle() {
    show.value = !show.value;
    if (show.value) {
        nextTick(()=>{
            viewTransition(btn.value, card.value.$el).then((resFn) => rvtFn = resFn);
        })
    } else if(rvtFn) {
        rvtFn();
        rvtFn = null;
    }
}
</script>

3. Parameters 参数

• dom1 (HTMLElement): The first DOM element involved in the transition. 参与过渡的初始 DOM 元素。
• dom2 (HTMLElement): The second DOM element involved in the transition. 参与过渡的结束 DOM 元素。
• options (Object): Animation options.
  • duration (Number, optional): Animation duration in milliseconds. Default is 300. 动画持续时间（毫秒）。默认值为 300 。
  • isHideDom1 (Boolean, optional): Whether to hide dom1. Default is true. 是否隐藏 dom1 。默认值为 true 。
  • isHideDom1Position (Boolean, optional): Whether to hide the position of dom1. Default is false. 是否隐藏 dom1 的位置。默认值为 false 。
  • easing (String, optional): Easing function for the animation. Default is 'ease-in-out'. 动画的缓动函数。默认值为 'ease-in-out' 。

4. Return Value 返回值

A Promise that resolves to a function. The resolved function can be used for the reverse transition.

返回一个 Promise，其解析为一个函数。解析后的函数可用于反向过渡。

5. License 许可证

This library is licensed under the MIT License.

本库根据 MIT 许可证 授权。