Base number: 0

Cubic bezier curve: 0.00

Custom function: 0.00

useTransition

Transition between values

Usage

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

useTransition(baseNumber, {
  duration: 1000,
  transition: TransitionPresets.easeInOutCubic,
})

The following transitions are available via the TransitionPresets constant.

Custom transitions can be defined using cubic bezier curves. Transitions defined this way work the same as CSS easing functions.

useTransition(baseNumber, {
  duration: 1000,
  transition: [0.75, 0, 0.25, 1],
})

For more complex transitions, a custom function can be provided.

const easeOutElastic = (n) => {
  return n === 0
    ? 0
    : n === 1
      ? 1
      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}

useTransition(baseNumber, {
  duration: 1000,
  transition: easeOutElastic,
})

To choreograph behavior around a transition, define onStarted or onFinished callbacks.

useTransition(baseNumber, {
  duration: 1000,
  transition: easeOutElastic,
  onStarted() {
    // called after the transition starts
  },
  onFinished() {
    // called after the transition ends
  },
})

Type Declarations

/**
 * Cubic bezier points
 */
declare type CubicBezierPoints = [number, number, number, number]
/**
 * Easing function
 */
declare type EasingFunction = (n: number) => number
/**
 * Transition options
 */
interface TransitionOptions {
  duration?: MaybeRef<number>
  onFinished?: () => unknown
  onStarted?: () => unknown
  transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}
/**
 * Common transitions
 *
 * @see https://easings.net
 */
export declare const TransitionPresets: Record<string, CubicBezierPoints>
/**
 * Transition between values.
 *
 * @see /useTransition
 * @param source
 * @param options
 */
export declare function useTransition(
  source: Ref<number>,
  options?: TransitionOptions
): Ref<number>
export {}

Source

SourceDemoDocs