useAnimate

リアクティブな Web Animations API。

使用法

基本的な使用法

useAnimate 関数はアニメーションとその制御関数を返します。

<script setup lang="ts">
import { useAnimate } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')
const {
  isSupported,
  animate,

  // アクション
  play,
  pause,
  reverse,
  finish,
  cancel,

  // 状態
  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 を使用できます。詳細は Keyframe Formats を参照してください。

import { useAnimate } from '@vueuse/core'

const el = useTemplateRef<HTMLElement>('el')
// ---cut---
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)