useAnimate

分类

动画

导出大小

1.75 kB

上次更改

2 个月前

响应式的 Web Animations API。

演示

源码在线演练场 (beta)

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。更多详情请参见关键帧格式。

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)

类型声明

显示类型声明

export interface UseAnimateOptions
  extends KeyframeAnimationOptions,
    ConfigurableWindow {
  /**
   * Will automatically run play when `useAnimate` is used
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * Whether to commits the end styling state of an animation to the element being animated
   * In general, you should use `fill` option with this.
   *
   * @default false
   */
  commitStyles
?: boolean
  /**
   * Whether to persists the animation
   *
   * @default false
   */
  persist
?: boolean
  /**
   * Executed after animation initialization
   */
  onReady
?: (animate
: Animation) => void
  /**
   * Callback when error is caught.
   */
  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>
}
/**
 * Reactive Web Animations API
 *
 * @see https://vueuse.org.cn/useAnimate
 * @param target
 * @param keyframes
 * @param options
 */
export declare function useAnimate
(
  target
: MaybeComputedElementRef
,
  keyframes
: UseAnimateKeyframes
,
  options
?: number | UseAnimateOptions,
): UseAnimateReturn