useAnimate
响应式的 Web Animations API。
示例
VueUse useAnimate
startTime: null currentTime: null playbackRate: 1 playState: idle replaceState: active pending: false
用法
基本用法
useAnimate 函数将返回动画及其控制函数。
vue
<script setup lang="ts">
import { useAnimate } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef('el')
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>自定义关键帧
可以是关键帧对象的数组、关键帧对象，或者是一个 ref。更多详情请参考关键帧格式。
ts
const keyframes = { transform: 'rotate(360deg)' }
// 或者
const keyframes = [
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' },
]
// 或者
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)类型声明
显示类型声明
ts
export interface UseAnimateOptions
extends KeyframeAnimationOptions,
ConfigurableWindow {
/**
* 当使用 `useAnimate` 时，是否自动运行播放
*
* @default true
*/
immediate?: boolean
/**
* 是否将动画的结束样式状态提交给被动画的元素
* 通常情况下，你应该使用 `fill` 选项
*
* @default false
*/
commitStyles?: boolean
/**
* 是否持续动画
*
* @default false
*/
persist?: boolean
/**
* 在动画初始化后执行
*/
onReady?: (animate: Animation) => void
/**
* 捕获到错误时的回调
*/
onError?: (e: unknown) => void
}
export type UseAnimateKeyframes = MaybeRef<
Keyframe[] | PropertyIndexedKeyframes | null
>
export interface UseAnimateReturn {
isSupported: ComputedRef<boolean>
animate: ShallowRef<Animation | undefined>
play: () => void
pause: () => void
reverse: () => void
finish: () => void
cancel: () => void
pending: ComputedRef<boolean>
playState: ComputedRef<AnimationPlayState>
replaceState: ComputedRef<AnimationReplaceState>
startTime: WritableComputedRef<CSSNumberish | number | null>
currentTime: WritableComputedRef<CSSNumberish | null>
timeline: WritableComputedRef<AnimationTimeline | null>
playbackRate: WritableComputedRef<number>
}
/**
* 响应式 Web Animations API
*
* @see https://vueuse.org/useAnimate
* @param target
* @param keyframes
* @param options
*/
export declare function useAnimate(
target: MaybeComputedElementRef,
keyframes: UseAnimateKeyframes,
options?: number | UseAnimateOptions,
): UseAnimateReturn源码
贡献者
一纸忘忧