0.3.3 • Published 10 months ago
safe-view-transition v0.3.3
safe-view-transition
Use the awesome View Transitions API safely, without needing to worry about whether it's available, or whether the user prefers reduced motion
Installation
npm i safe-view-transition
Usage
You can use this almost the same way as document.startViewTransition
:
import { safeViewTransition } from 'safe-view-transition'
safeViewTransition(
() => {
// do the dom changes
},
{
/* options */
}
)
options
ignoreMotionPreference
: whentrue
, we'll try to do a transition even if the(prefers-reduced-motion: no-preference)
media query isn't matched.
Vue 3
If you're using Vue, you should use the helper from safe-view-transition
like so:
<script setup lang="ts">
import { safeViewTransition } from 'safe-view-transition/vue'
const updateState = () => {
safeViewTransition(
() => {
// Update state here
},
{
// This defaults to true, but you can change it to false
useNextTick: true,
}
)
}
</script>
<template>
<!-- your cool template -->
</template>
Extra options
useNextTick
. whentrue
, after calling the provided callback, we'll wait for the current tick to complete before the transition starts. Defaults totrue
.
React
If you're using React, you should use the helper from safe-view-transition
like so:
import { safeViewTransition } from 'safe-view-transition/react';
function Component() {
const updateState = () => {
safeViewTransition(() => {
// Update state here
})
}
return ( /* your cool JSX */ )
}
Warning
This helper usesflushSync
, to force side effects for state updates (like updating the real DOM) to happen immediately, but it can hurt the performance of your app.
Examples
0.3.3
10 months ago
0.3.2
10 months ago
0.3.1
10 months ago
0.3.0
10 months ago
0.2.3
10 months ago
0.2.2
10 months ago
0.2.1-subpath-beta-1
10 months ago
0.2.1
10 months ago
0.2.1-subpath-beta-0
10 months ago
0.2.0
10 months ago
0.1.3
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago
0.0.0
10 months ago