📄 `useTransition`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	15
📦 Imports	13
📊 Variables & Constants	2
⚡ Async/Await Patterns	1
🟢 Vue Composition API	3
📐 Interfaces	2
📑 Type Aliases	3

📚 Table of Contents¶

Imports
Variables & Constants
Async/Await Patterns
Vue Composition API
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/core/useTransition/index.ts

📦 Imports¶

Name	Source
`ComputedRef`	`vue`
`MaybeRef`	`vue`
`MaybeRefOrGetter`	`vue`
`Ref`	`vue`
`ConfigurableWindow`	`../_configurable`
`linear`	`@vueuse/shared`
`promiseTimeout`	`@vueuse/shared`
`tryOnScopeDispose`	`@vueuse/shared`
`computed`	`vue`
`shallowRef`	`vue`
`toValue`	`vue`
`watch`	`vue`
`defaultWindow`	`../_configurable`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`_TransitionPresets`	`{ readonly easeInSine: readonly [0.12...`	const	`{ easeInSine: [0.12, 0, 0.39, 0], easeOutSine: [0.61, 1, 0.88, 1], easeInOutS...`	✗
`TransitionPresets`	`Record<"easeInSine" \\| "easeOutSine" ...`	const	`Object.assign({}, { linear }, _TransitionPresets) as Record<keyof typeof _Tra...`	✓

Async/Await Patterns¶

Type	Function	Await Expressions	Promise Chains
promise-chain	`transition`	none	new Promise(...)

Vue Composition API¶

Name	Type	Reactive Variables	Composables
`watch`	watch	none	none
`watch`	watch	none	none
`computed`	computed	none	none

Functions¶

`transition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>`¶

Transition from one value to another.

Parameters:

source any: No description
from any: No description
to any: No description
options any: No description

Raw JSDoc

/**
 * Transition from one value to another.
 *
 * @param source
 * @param from
 * @param to
 * @param options
 */

Calls:

toValue (from vue)
Date.now
normalizeEasing
createEasingFunction
options.abort
resolve
ease
interpolation
window?.requestAnimationFrame
tick

Code

export function transition<T>(
  source: Ref<T>,
  from: MaybeRefOrGetter<T>,
  to: MaybeRefOrGetter<T>,
  options: TransitionOptions<T> = {},
): PromiseLike<void> {
  const {
    window = defaultWindow,
  } = options
  const fromVal = toValue(from)
  const toVal = toValue(to)
  const duration = toValue(options.duration) ?? 1000
  const startedAt = Date.now()
  const endAt = Date.now() + duration

  const interpolation = typeof options.interpolation === 'function'
    ? options.interpolation
    : defaultInterpolation

  const trans = typeof options.easing !== 'undefined'
    ? normalizeEasing(options.easing)
    : normalizeEasing(options.transition)

  const ease = typeof trans === 'function'
    ? trans
    : createEasingFunction(trans)

  return new Promise<void>((resolve) => {
    source.value = fromVal

    const tick = () => {
      if (options.abort?.()) {
        resolve()

        return
      }

      const now = Date.now()
      const alpha = ease((now - startedAt) / duration)

      source.value = interpolation(fromVal, toVal, alpha) as T

      if (now < endAt) {
        window?.requestAnimationFrame(tick)
      }
      else {
        source.value = toVal

        resolve()
      }
    }

    tick()
  })
}

`executeTransition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>`¶

Transition from one value to another.

⚠️ DEPRECATED: The executeTransition function is deprecated, use transition instead.

Parameters:

source any: No description
from any: No description
to any: No description
options any: No description

Raw JSDoc

/**
 * Transition from one value to another.
 * @deprecated The `executeTransition` function is deprecated, use `transition` instead.
 *
 * @param source
 * @param from
 * @param to
 * @param options
 */

Calls:

transition

Code

export function executeTransition<T>(
  source: Ref<T>,
  from: MaybeRefOrGetter<T>,
  to: MaybeRefOrGetter<T>,
  options: TransitionOptions<T> = {},
) {
  return transition(source, from, to, options)
}

`useTransition(source: [...T], options: UseTransitionOptions<T>): ComputedRef<{ [K in keyof T]: number }>`¶

Parameters:

source [...T]
options UseTransitionOptions<T>

Returns: ComputedRef<{ [K in keyof T]: number }>

Code

export function useTransition<T extends MaybeRefOrGetter<number>[]>(source: [...T], options?: UseTransitionOptions<T>): ComputedRef<{ [K in keyof T]: number }>

`createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction`¶

Create an easing function from cubic bezier points.

Raw JSDoc

/**
 * Create an easing function from cubic bezier points.
 */

Calls:

a
b
c
getSlope
calcBezier
getTforX

Code

function createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction {
  const a = (a1: number, a2: number) => 1 - 3 * a2 + 3 * a1
  const b = (a1: number, a2: number) => 3 * a2 - 6 * a1
  const c = (a1: number) => 3 * a1

  const calcBezier = (t: number, a1: number, a2: number) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t

  const getSlope = (t: number, a1: number, a2: number) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1)

  const getTforX = (x: number) => {
    let aGuessT = x

    for (let i = 0; i < 4; ++i) {
      const currentSlope = getSlope(aGuessT, p0, p2)
      if (currentSlope === 0)
        return aGuessT
      const currentX = calcBezier(aGuessT, p0, p2) - x
      aGuessT -= currentX / currentSlope
    }

    return aGuessT
  }

  return (x: number) => (p0 === p1 && p2 === p3) ? x : calcBezier(getTforX(x), p1, p3)
}

`lerp(a: number, b: number, alpha: number): number`¶

Parameters:

a number
b number
alpha number

Returns: number

Code

function lerp(a: number, b: number, alpha: number) {
  return a + alpha * (b - a)
}

`defaultInterpolation(a: T, b: T, t: number): T`¶

Parameters:

a T
b T
t number

Returns: T

Calls:

toValue (from vue)
lerp
Array.isArray
aVal.map

Code

function defaultInterpolation<T>(a: T, b: T, t: number) {
  const aVal = toValue(a)
  const bVal = toValue(b)

  if (typeof aVal === 'number' && typeof bVal === 'number') {
    return lerp(aVal, bVal, t) as T
  }

  if (Array.isArray(aVal) && Array.isArray(bVal)) {
    return aVal.map((v, i) => lerp(v, toValue(bVal[i]), t)) as T
  }

  throw new TypeError('Unknown transition type, specify an interpolation function.')
}

`normalizeEasing(easing: MaybeRef<EasingFunction | CubicBezierPo…): any`¶

Parameters:

easing MaybeRef<EasingFunction | CubicBezierPoints> | undefined

Returns: any

Calls:

toValue (from vue)

Code

function normalizeEasing(easing: MaybeRef<EasingFunction | CubicBezierPoints> | undefined) {
  return typeof easing === 'function'
    ? easing
    : (toValue(easing) ?? linear)
}

Internal helpers¶

Declared inside another function in this file.

`a(a1: number, a2: number): number`¶

Parameters:

a1 number
a2 number

Returns: number

Code

(a1: number, a2: number) => 1 - 3 * a2 + 3 * a1

`b(a1: number, a2: number): number`¶

Parameters:

a1 number
a2 number

Returns: number

Code

(a1: number, a2: number) => 3 * a2 - 6 * a1

`c(a1: number): number`¶

Parameters:

a1 number

Returns: number

Code

(a1: number) => 3 * a1

`calcBezier(t: number, a1: number, a2: number): number`¶

Parameters:

t number
a1 number
a2 number

Returns: number

Code

(t: number, a1: number, a2: number) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t

`getSlope(t: number, a1: number, a2: number): number`¶

Parameters:

t number
a1 number
a2 number

Returns: number

Code

(t: number, a1: number, a2: number) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1)

`getTforX(x: number): number`¶

Parameters:

x number

Returns: number

Calls:

getSlope
calcBezier

Code

(x: number) => {
    let aGuessT = x

    for (let i = 0; i < 4; ++i) {
      const currentSlope = getSlope(aGuessT, p0, p2)
      if (currentSlope === 0)
        return aGuessT
      const currentX = calcBezier(aGuessT, p0, p2) - x
      aGuessT -= currentX / currentSlope
    }

    return aGuessT
  }

`tick(): void`¶

Returns: void

Calls:

options.abort
resolve
Date.now
ease
interpolation
window?.requestAnimationFrame

Code

() => {
      if (options.abort?.()) {
        resolve()

        return
      }

      const now = Date.now()
      const alpha = ease((now - startedAt) / duration)

      source.value = interpolation(fromVal, toVal, alpha) as T

      if (now < endAt) {
        window?.requestAnimationFrame(tick)
      }
      else {
        source.value = toVal

        resolve()
      }
    }

`sourceVal(): T`¶

Returns: T

Calls:

toValue (from vue)
Array.isArray
(v as any).map

Code

(): T => {
    const v = toValue(source)

    return typeof options.interpolation === 'undefined' && Array.isArray(v)
      ? (v as any).map(toValue)
      : v
  }

Interfaces¶

`TransitionOptions<T>`¶

Interface Code

export interface TransitionOptions<T> extends ConfigurableWindow {

  /**
   * Manually abort a transition
   */
  abort?: () => any

  /**
   * Transition duration in milliseconds
   */
  duration?: MaybeRef<number>

  /**
   * Easing function or cubic bezier points to calculate transition progress
   */
  easing?: MaybeRef<EasingFunction | CubicBezierPoints>

  /**
   * Custom interpolation function
   */
  interpolation?: InterpolationFunction<T>

  /**
   * Easing function or cubic bezier points to calculate transition progress
   * @deprecated The `transition` option is deprecated, use `easing` instead.
   */
  transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}

Properties¶

Name	Type	Optional	Description
`abort`	`() => any`	✓	not shown
`duration`	`MaybeRef<number>`	✓	not shown
`easing`	`MaybeRef<EasingFunction \\| CubicBezierPoints>`	✓	not shown
`interpolation`	`InterpolationFunction<T>`	✓	not shown
`transition`	`MaybeRef<EasingFunction \\| CubicBezierPoints>`	✓	not shown

`UseTransitionOptions<T>`¶

Interface Code

export interface UseTransitionOptions<T> extends TransitionOptions<T> {
  /**
   * 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
}

Properties¶

Name	Type	Optional	Description
`delay`	`MaybeRef<number>`	✓	not shown
`disabled`	`MaybeRef<boolean>`	✓	not shown
`onFinished`	`() => void`	✓	not shown
`onStarted`	`() => void`	✓	not shown

Type Aliases¶

`CubicBezierPoints`¶

/* * Cubic bezier points /

type CubicBezierPoints = [number, number, number, number];

`EasingFunction`¶

/* * Easing function /

type EasingFunction = (n: number) => number;

`InterpolationFunction<T>`¶

/* * Interpolation function /

type InterpolationFunction<T> = (from: T, to: T, t: number) => T;

Generated by Syntax Scribe

📄 useTransition¶

📊 Analysis Summary¶

📚 Table of Contents¶

🛠️ File Location:¶

📦 Imports¶

Variables & Constants¶

Async/Await Patterns¶

Vue Composition API¶

Functions¶

transition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>¶

executeTransition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>¶

useTransition(source: [...T], options: UseTransitionOptions<T>): ComputedRef<{ [K in keyof T]: number }>¶

createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction¶

lerp(a: number, b: number, alpha: number): number¶

defaultInterpolation(a: T, b: T, t: number): T¶

normalizeEasing(easing: MaybeRef<EasingFunction | CubicBezierPo…): any¶

Internal helpers¶

a(a1: number, a2: number): number¶

b(a1: number, a2: number): number¶

c(a1: number): number¶

calcBezier(t: number, a1: number, a2: number): number¶

getSlope(t: number, a1: number, a2: number): number¶

getTforX(x: number): number¶

tick(): void¶

sourceVal(): T¶

Interfaces¶

TransitionOptions<T>¶

Properties¶

UseTransitionOptions<T>¶

Properties¶

Type Aliases¶

CubicBezierPoints¶

EasingFunction¶

InterpolationFunction<T>¶

📄 `useTransition`¶

`transition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>`¶

`executeTransition(source: Ref<T>, from: MaybeRefOrGetter<T>, to: MaybeRefOrGetter<T>, options: TransitionOptions<T>): PromiseLike<void>`¶

`useTransition(source: [...T], options: UseTransitionOptions<T>): ComputedRef<{ [K in keyof T]: number }>`¶

`createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction`¶

`lerp(a: number, b: number, alpha: number): number`¶

`defaultInterpolation(a: T, b: T, t: number): T`¶

`normalizeEasing(easing: MaybeRef<EasingFunction | CubicBezierPo…): any`¶

`a(a1: number, a2: number): number`¶

`b(a1: number, a2: number): number`¶

`c(a1: number): number`¶

`calcBezier(t: number, a1: number, a2: number): number`¶

`getSlope(t: number, a1: number, a2: number): number`¶

`getTforX(x: number): number`¶

`tick(): void`¶

`sourceVal(): T`¶

`TransitionOptions<T>`¶

`UseTransitionOptions<T>`¶

`CubicBezierPoints`¶

`EasingFunction`¶

`InterpolationFunction<T>`¶