useTransition

値間のトランジション

使用法

追従するソース値を定義し、変更されたときに出力が新しい値にトランジションします。トランジションが進行中にソースが変更された場合、前のトランジションが中断された場所から新しいトランジションが開始されます。

import { TransitionPresets, useTransition } from '@vueuse/core'
import { shallowRef } from 'vue'

const source = shallowRef(0)

const output = useTransition(source, {
  duration: 1000,
  easing: TransitionPresets.easeInOutCubic,
})

トランジションのイージングは、cubic bezier curvesを使用してカスタマイズできます。

import { useTransition } from '@vueuse/core'
// ---cut---
useTransition(source, {
  easing: [0.75, 0, 0.25, 1],
})

以下のトランジションは TransitionPresets 定数を通じて利用可能です。

• linear
• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack

より複雑なイージングには、カスタム関数を提供できます。

import { useTransition } from '@vueuse/core'
// ---cut---
function easeOutElastic(n) {
  return n === 0
    ? 0
    : n === 1
      ? 1
      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}

useTransition(source, {
  easing: easeOutElastic,
})

デフォルトでは、source は数値または数値の配列でなければなりません。より複雑な値には、カスタムの interpolation 関数を定義します。例えば、以下のように Three.js の回転をトランジションさせることができます。

import { useTransition } from '@vueuse/core'
// ---cut---
import { Quaternion } from 'three'

const source = ref(new Quaternion())

const output = useTransition(source, {
  interpolation: (q1, q2, t) => new Quaternion().slerpQuaternions(q1, q2, t)
})

トランジションの開始を制御するには、delay 値を設定します。トランジションに関連する動作を調整するには、onStarted または onFinished コールバックを定義します。

import { useTransition } from '@vueuse/core'
// ---cut---
useTransition(source, {
  delay: 1000,
  onStarted() {
    // トランジション開始後に呼び出されます
  },
  onFinished() {
    // トランジション終了後に呼び出されます
  },
})

トランジションを停止するには、ブール値の disabled プロパティを定義します。これは duration が 0 であることとは異なることに注意してください。無効化されたトランジションはソース値を同期的に追跡します。delay を考慮せず、onStarted や onFinished コールバックを発火しません。

さらに制御を加えるために、トランジションは transition 関数を介して手動で実行できます。この関数は、トランジションが完了したときに解決されるプロミスを返します。手動トランジションは、真の値を返す abort 関数を定義することでキャンセルできます。

import { transition } from '@vueuse/core'

await transition(source, from, to, {
  abort() {
    if (shouldAbort)
      return true
  }
})