VueUseuseAnimate ​
Reactive Web Animations API.
Demo ​
VueUse useAnimate
startTime: null currentTime: null playbackRate: 1 playState: 'idle' replaceState: 'active' pending: false
Usage ​
Basic Usage ​
The useAnimate function will return the animate and its control function.
html
<template>
<span ref="el" style="display:inline-block">useAnimate</span>
</template>
<script setup>
import { ref } from 'vue'
import { useAnimate } from '@vueuse/core'
const el = ref()
const {
isSupported,
animate,
// actions
play,
pause,
reverse,
finish,
cancel,
// states
pending,
playState,
replaceState,
startTime,
currentTime,
timeline,
playbackRate,
} = useAnimate(el, { transform: 'rotate(360deg)' }, 1000)
</script><template>
<span ref="el" style="display:inline-block">useAnimate</span>
</template>
<script setup>
import { ref } from 'vue'
import { useAnimate } from '@vueuse/core'
const el = ref()
const {
isSupported,
animate,
// actions
play,
pause,
reverse,
finish,
cancel,
// states
pending,
playState,
replaceState,
startTime,
currentTime,
timeline,
playbackRate,
} = useAnimate(el, { transform: 'rotate(360deg)' }, 1000)
</script>Custom Keyframes ​
Either an array of keyframe objects, or a keyframe object, or a ref. See Keyframe Formats for more details.
ts
const keyframes = { transform: 'rotate(360deg)' }
// Or
const keyframes = [
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' },
]
// Or
const keyframes = ref([
{ clipPath: 'circle(20% at 0% 30%)' },
{ clipPath: 'circle(20% at 50% 80%)' },
{ clipPath: 'circle(20% at 100% 30%)' },
])
useAnimate(el, keyframes, 1000)const keyframes = { transform: 'rotate(360deg)' }
// Or
const keyframes = [
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' },
]
// Or
const keyframes = ref([
{ clipPath: 'circle(20% at 0% 30%)' },
{ clipPath: 'circle(20% at 50% 80%)' },
{ clipPath: 'circle(20% at 100% 30%)' },
])
useAnimate(el, keyframes, 1000)Source ​
Contributors ​
Anthony Fu
丶远方
jack zhang
qiangChangelog ​
v10.0.0-beta.4 on 4/13/2023