📄 `index.ts`¶

📊 Analysis Summary¶

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

📚 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`
`linear`	`@vueuse/shared`
`promiseTimeout`	`@vueuse/shared`
`tryOnScopeDispose`	`@vueuse/shared`
`computed`	`vue`
`deepRef`	`vue`
`toValue`	`vue`
`watch`	`vue`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`_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 [...]; ... 18 more ...; readonly easeInOutBack: readonly [...]; }`	const	`{
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
easeInQuart: [0.5, 0, 0.75, 0],
easeOutQuart: [0.25, 1, 0.5, 1],
easeInOutQuart: [0.76, 0, 0.24, 1],
easeInQuint: [0.64, 0, 0.78, 0],
easeOutQuint: [0.22, 1, 0.36, 1],
easeInOutQuint: [0.83, 0, 0.17, 1],
easeInExpo: [0.7, 0, 0.84, 0],
easeOutExpo: [0.16, 1, 0.3, 1],
easeInOutExpo: [0.87, 0, 0.13, 1],
easeInCirc: [0.55, 0, 1, 0.45],
easeOutCirc: [0, 0.55, 0.45, 1],
easeInOutCirc: [0.85, 0, 0.15, 1],
easeInBack: [0.36, 0, 0.66, -0.56],
easeOutBack: [0.34, 1.56, 0.64, 1],
easeInOutBack: [0.68, -0.6, 0.32, 1.6],
} as const`	✗
`TransitionPresets`	`Record<"easeInSine" \| "easeOutSine" \| "easeInOutSine" \| "easeInQuad" \| "easeOutQuad" \| "easeInOutQuad" \| "easeInCubic" \| "easeOutCubic" \| "easeInOutCubic" \| "easeInQuart" \| "easeOutQuart" \| ... 12 more ... \| "easeInOutBack", CubicBezierPoints> & { ...; }`	const	`Object.assign({}, { linear }, _TransitionPresets) as Record<keyof typeof _TransitionPresets, CubicBezierPoints> & { linear: EasingFunction }`	✓
`aGuessT`	`number`	let/var	`x`	✗
`currentX`	`number`	const	`calcBezier(aGuessT, p0, p2) - x`	✗
`duration`	`any`	const	`toValue(options.duration) ?? 1000`	✗
`endAt`	`any`	const	`Date.now() + duration`	✗
`trans`	`any`	const	`typeof options.transition === 'function'
? options.transition
: (toValue(options.transition) ?? linear)`	✗
`ease`	`any`	const	`typeof trans === 'function'
? trans
: createEasingFunction(trans)`	✗
`currentId`	`number`	let/var	`0`	✗
`id`	`number`	let/var	`++currentId`	✗
`toVal`	`any`	let/var	`Array.isArray(to) ? to.map(toValue<number>) : toValue(to)`	✗

Async/Await Patterns¶

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

Vue Composition API¶

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

Functions¶

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

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)
}

JSDoc:

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

Parameters:
[p0, p1, p2, p3]: CubicBezierPoints
Return Type: EasingFunction
Calls:
a
b
c
getSlope
calcBezier
getTforX

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

Code

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

Parameters:
a1: number
a2: number
Return Type: number

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

Code

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

Parameters:
a1: number
a2: number
Return Type: number

`c(a1: number): number`¶

Code

(a1: number) => 3 * a1

Parameters:
a1: number
Return Type: number

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

Code

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

Parameters:
t: number
a1: number
a2: number
Return Type: number

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

Code

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

Parameters:
t: number
a1: number
a2: number
Return Type: number

`getTforX(x: number): number`¶

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
  }

Parameters:
x: number
Return Type: number
Calls:
getSlope
calcBezier

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

Code

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

Parameters:
a: number
b: number
alpha: number
Return Type: number

`toVec(t: number | number[] | undefined): number[]`¶

Code

function toVec(t: number | number[] | undefined) {
  return (typeof t === 'number' ? [t] : t) || []
}

Parameters:
t: number | number[] | undefined
Return Type: number[]

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

Code

export function executeTransition<T extends number | number[]>(
  source: Ref<T>,
  from: MaybeRefOrGetter<T>,
  to: MaybeRefOrGetter<T>,
  options: TransitionOptions = {},
): PromiseLike<void> {
  const fromVal = toValue(from)
  const toVal = toValue(to)
  const v1 = toVec(fromVal)
  const v2 = toVec(toVal)
  const duration = toValue(options.duration) ?? 1000
  const startedAt = Date.now()
  const endAt = Date.now() + duration
  const trans = typeof options.transition === 'function'
    ? options.transition
    : (toValue(options.transition) ?? linear)

  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)
      const arr = toVec(source.value).map((n, i) => lerp(v1[i], v2[i], alpha))

      if (Array.isArray(source.value))
        (source.value as number[]) = arr.map((n, i) => lerp(v1[i] ?? 0, v2[i] ?? 0, alpha))
      else if (typeof source.value === 'number')
        (source.value as number) = arr[0]

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

        resolve()
      }
    }

    tick()
  })
}

JSDoc:

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

Parameters:
source: Ref<T>
from: MaybeRefOrGetter<T>
to: MaybeRefOrGetter<T>
options: TransitionOptions
Return Type: PromiseLike<void>
Calls:
toValue (from vue)
toVec
Date.now
createEasingFunction
options.abort
resolve
ease
toVec(source.value).map
lerp
Array.isArray
arr.map
requestAnimationFrame
tick

`tick(): void`¶

Code

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

        return
      }

      const now = Date.now()
      const alpha = ease((now - startedAt) / duration)
      const arr = toVec(source.value).map((n, i) => lerp(v1[i], v2[i], alpha))

      if (Array.isArray(source.value))
        (source.value as number[]) = arr.map((n, i) => lerp(v1[i] ?? 0, v2[i] ?? 0, alpha))
      else if (typeof source.value === 'number')
        (source.value as number) = arr[0]

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

        resolve()
      }
    }

Return Type: void
Calls:
options.abort
resolve
Date.now
ease
toVec(source.value).map
lerp
Array.isArray
arr.map
requestAnimationFrame

`useTransition(source: MaybeRefOrGetter<number>, options: UseTransitionOptions): ComputedRef<number>`¶

Code

export function useTransition(source: MaybeRefOrGetter<number>, options?: UseTransitionOptions): ComputedRef<number>

Parameters:
source: MaybeRefOrGetter<number>
options: UseTransitionOptions
Return Type: ComputedRef<number>

`sourceVal(): any`¶

Code

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

    return typeof v === 'number'
      ? v
      : v.map(toValue<number>)
  }

Return Type: any
Calls:
toValue (from vue)
v.map

`abort(): any`¶

Code

() => id !== currentId || options.abort?.()

Return Type: any

`abort(): any`¶

Code

() => id !== currentId || options.abort?.()

Return Type: any

Interfaces¶

`TransitionOptions`¶

Interface Code

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>
}

Properties¶

Name	Type	Optional
`abort`	`() => any`	✓
`duration`	`MaybeRef<number>`	✓
`transition`	`MaybeRef<EasingFunction \| CubicBezierPoints>`	✓

`UseTransitionOptions`¶

Interface Code

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
}

Properties¶

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

Type Aliases¶

`CubicBezierPoints`¶

/* * Cubic bezier points /

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

`EasingFunction`¶

/* * Easing function /

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

📄 index.ts¶

📊 Analysis Summary¶

📚 Table of Contents¶

🛠️ File Location:¶

📦 Imports¶

Variables & Constants¶

Async/Await Patterns¶

Vue Composition API¶

Functions¶

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

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¶

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

toVec(t: number | number[] | undefined): number[]¶

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

tick(): void¶

useTransition(source: MaybeRefOrGetter<number>, options: UseTransitionOptions): ComputedRef<number>¶

sourceVal(): any¶

abort(): any¶

abort(): any¶

Interfaces¶

TransitionOptions¶

Properties¶

UseTransitionOptions¶

Properties¶

Type Aliases¶

CubicBezierPoints¶

EasingFunction¶

📄 `index.ts`¶

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

`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`¶

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

`toVec(t: number | number[] | undefined): number[]`¶

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

`tick(): void`¶

`useTransition(source: MaybeRefOrGetter<number>, options: UseTransitionOptions): ComputedRef<number>`¶

`sourceVal(): any`¶

`abort(): any`¶

`abort(): any`¶

`TransitionOptions`¶

`UseTransitionOptions`¶

`CubicBezierPoints`¶

`EasingFunction`¶