diff --git a/src/index.ts b/src/index.ts index 54abaea..42493ec 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,2 @@ -import "./style.css"; - -export { sum } from "./sum"; +export { ViewTransitionsPlugin } from './plugin' +export { startViewTransition } from './transition' diff --git a/src/plugin.ts b/src/plugin.ts new file mode 100644 index 0000000..36e0824 --- /dev/null +++ b/src/plugin.ts @@ -0,0 +1,13 @@ +import type { Plugin } from 'vue' + +export function ViewTransitionsPlugin(): Plugin { + return { + install(app) { + app.directive('view-transition-name', { + beforeMount(el, binding) { + el.style.viewTransitionName = binding.value + } + }) + } + } +} diff --git a/src/transition.ts b/src/transition.ts new file mode 100644 index 0000000..c3e41e8 --- /dev/null +++ b/src/transition.ts @@ -0,0 +1,27 @@ +interface ViewTransition { + ready: Promise + finished: Promise + skipTransition: () => void +} + +export async function startViewTransition(): Promise { + const viewTransition = {} as ViewTransition + // @ts-expect-error startViewTransition is not existed on document yet + if (document.startViewTransition) { + await new Promise((resolve) => { + // @ts-expect-error startViewTransition is not existed on document yet + const nativeViewTransition = document.startViewTransition(() => { + resolve() + }) + viewTransition.ready = nativeViewTransition.ready + viewTransition.finished = nativeViewTransition.finished + viewTransition.skipTransition = + nativeViewTransition.skipTransition.bind(nativeViewTransition) + }) + } else { + console.error( + "This browser doesn't support View Transitions Api, please check: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility" + ) + } + return viewTransition +}