useTransition

カテゴリ

アニメーション

エクスポートサイズ

1.15 kB

最終更新日

先週

値間のトランジション

デモ

ソースコード

三次ベジェ曲線: 0.00

カスタム関数: 0.00

ベクトル: [0.00, 0.00]

使用方法

追従する数値のソース値を定義すると、変更時に出力値が新しい値に遷移します。トランジション実行中にソースが変更されると、前のトランジションが中断された地点から新しいトランジションが開始されます。

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

const source = ref(0)

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

トランジションを同期するには、数値の配列を使用します。例として、色間のトランジションを行う方法を示します。

const source = ref([0, 0, 0])

const output = useTransition(source)

const color = computed(() => {
  const [r, g, b] = output.value
  return `rgb(${r}, ${g}, ${b})`
})

トランジションのイージングは、三次ベジェ曲線を使用してカスタマイズできます。このように定義されたトランジションは、CSSイージング関数と同様に機能します。

useTransition(source, {
  transition: [0.75, 0, 0.25, 1],
})

次のトランジションは、`TransitionPresets`定数から使用できます。

より複雑なトランジションには、カスタム関数を指定できます。

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, {
  transition: easeOutElastic,
})

トランジションの開始タイミングを制御するには、`delay`値を設定します。トランジションを中心とした動作を調整するには、`onStarted`または`onFinished`コールバックを定義します。

useTransition(source, {
  delay: 1000,
  onStarted() {
    // called after the transition starts
  },
  onFinished() {
    // called after the transition ends
  },
})

トランジションを一時的に停止するには、ブール値の`disabled`プロパティを定義します。これは、`duration`を`0`にすることとは異なります。無効化されたトランジションは、ソース値を**同期的に**追跡します。`delay`は考慮せず、`onStarted`または`onFinished`コールバックは呼び出されません。

`executeTransition`を使用して、トランジションを手動で実行することもできます。この関数は、完了時に解決されるPromiseを返します。真の値を返す`abort`関数を定義することで、手動トランジションをキャンセルできます。

import { executeTransition } from '@vueuse/core'

await executeTransition(source, from, to, {
  duration: 1000,
})

型定義

型定義を表示

typescript

/**
 * Cubic bezier points
 */
export type CubicBezierPoints = [number, number, number, number]
/**
 * Easing function
 */
export type EasingFunction = (n: number) => number
/**
 * Transition options
 */
export interface TransitionOptions {
  /**
   * Manually abort a transition
   */
  abort?: () => any
  /**
   * Transition duration in milliseconds
   */
  duration?: MaybeRef<number>
  /**
   * Easing function or cubic bezier points for calculating transition values
   */
  transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}
export interface UseTransitionOptions extends TransitionOptions {
  /**
   * Milliseconds to wait before starting transition
   */
  delay?: MaybeRef<number>
  /**
   * Disables the transition
   */
  disabled?: MaybeRef<boolean>
  /**
   * Callback to execute after transition finishes
   */
  onFinished?: () => void
  /**
   * Callback to execute after transition starts
   */
  onStarted?: () => void
}
declare const _TransitionPresets: {
  readonly easeInSine: readonly [0.12, 0, 0.39, 0]
  readonly easeOutSine: readonly [0.61, 1, 0.88, 1]
  readonly easeInOutSine: readonly [0.37, 0, 0.63, 1]
  readonly easeInQuad: readonly [0.11, 0, 0.5, 0]
  readonly easeOutQuad: readonly [0.5, 1, 0.89, 1]
  readonly easeInOutQuad: readonly [0.45, 0, 0.55, 1]
  readonly easeInCubic: readonly [0.32, 0, 0.67, 0]
  readonly easeOutCubic: readonly [0.33, 1, 0.68, 1]
  readonly easeInOutCubic: readonly [0.65, 0, 0.35, 1]
  readonly easeInQuart: readonly [0.5, 0, 0.75, 0]
  readonly easeOutQuart: readonly [0.25, 1, 0.5, 1]
  readonly easeInOutQuart: readonly [0.76, 0, 0.24, 1]
  readonly easeInQuint: readonly [0.64, 0, 0.78, 0]
  readonly easeOutQuint: readonly [0.22, 1, 0.36, 1]
  readonly easeInOutQuint: readonly [0.83, 0, 0.17, 1]
  readonly easeInExpo: readonly [0.7, 0, 0.84, 0]
  readonly easeOutExpo: readonly [0.16, 1, 0.3, 1]
  readonly easeInOutExpo: readonly [0.87, 0, 0.13, 1]
  readonly easeInCirc: readonly [0.55, 0, 1, 0.45]
  readonly easeOutCirc: readonly [0, 0.55, 0.45, 1]
  readonly easeInOutCirc: readonly [0.85, 0, 0.15, 1]
  readonly easeInBack: readonly [0.36, 0, 0.66, -0.56]
  readonly easeOutBack: readonly [0.34, 1.56, 0.64, 1]
  readonly easeInOutBack: readonly [0.68, -0.6, 0.32, 1.6]
}
/**
 * Common transitions
 *
 * @see https://easings.net
 */
export declare const TransitionPresets: Record<
  keyof typeof _TransitionPresets,
  CubicBezierPoints
> & {
  linear: EasingFunction
}
/**
 * Transition from one value to another.
 *
 * @param source
 * @param from
 * @param to
 * @param options
 */
export declare function executeTransition<T extends number | number[]>(
  source: Ref<T>,
  from: MaybeRefOrGetter<T>,
  to: MaybeRefOrGetter<T>,
  options?: TransitionOptions,
): PromiseLike<void>
export declare function useTransition(
  source: MaybeRefOrGetter<number>,
  options?: UseTransitionOptions,
): ComputedRef<number>
export declare function useTransition<T extends MaybeRefOrGetter<number>[]>(
  source: [...T],
  options?: UseTransitionOptions,
): ComputedRef<{
  [K in keyof T]: number
}>
export declare function useTransition<T extends MaybeRefOrGetter<number[]>>(
  source: T,
  options?: UseTransitionOptions,
): ComputedRef<number[]>