1---
2category: Animation
3---
4 
5# useTransition
6 
7Transition between values
8 
9## Usage
10 
11Define a source value to follow, and when changed the output will transition to the new value. If the source changes while a transition is in progress, a new transition will begin from where the previous one was interrupted.
12 
13```ts
14import { TransitionPresets, useTransition } from '@vueuse/core'
15import { shallowRef } from 'vue'
16 
17const source = shallowRef(0)
18 
19const output = useTransition(source, {
20  duration: 1000,
21  easing: TransitionPresets.easeInOutCubic,
22})
23```
24 
25Transition easing can be customized using [cubic bezier curves](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier#description).
26 
27```ts
28import { useTransition } from '@vueuse/core'
29// ---cut---
30useTransition(source, {
31  easing: [0.75, 0, 0.25, 1],
32})
33```
34 
35The following transitions are available via the `TransitionPresets` constant.
36 
37- [`linear`](https://cubic-bezier.com/#0,0,1,1)
38- [`easeInSine`](https://cubic-bezier.com/#.12,0,.39,0)
39- [`easeOutSine`](https://cubic-bezier.com/#.61,1,.88,1)
40- [`easeInOutSine`](https://cubic-bezier.com/#.37,0,.63,1)
41- [`easeInQuad`](https://cubic-bezier.com/#.11,0,.5,0)
42- [`easeOutQuad`](https://cubic-bezier.com/#.5,1,.89,1)
43- [`easeInOutQuad`](https://cubic-bezier.com/#.45,0,.55,1)
44- [`easeInCubic`](https://cubic-bezier.com/#.32,0,.67,0)
45- [`easeOutCubic`](https://cubic-bezier.com/#.33,1,.68,1)
46- [`easeInOutCubic`](https://cubic-bezier.com/#.65,0,.35,1)
47- [`easeInQuart`](https://cubic-bezier.com/#.5,0,.75,0)
48- [`easeOutQuart`](https://cubic-bezier.com/#.25,1,.5,1)
49- [`easeInOutQuart`](https://cubic-bezier.com/#.76,0,.24,1)
50- [`easeInQuint`](https://cubic-bezier.com/#.64,0,.78,0)
51- [`easeOutQuint`](https://cubic-bezier.com/#.22,1,.36,1)
52- [`easeInOutQuint`](https://cubic-bezier.com/#.83,0,.17,1)
53- [`easeInExpo`](https://cubic-bezier.com/#.7,0,.84,0)
54- [`easeOutExpo`](https://cubic-bezier.com/#.16,1,.3,1)
55- [`easeInOutExpo`](https://cubic-bezier.com/#.87,0,.13,1)
56- [`easeInCirc`](https://cubic-bezier.com/#.55,0,1,.45)
57- [`easeOutCirc`](https://cubic-bezier.com/#0,.55,.45,1)
58- [`easeInOutCirc`](https://cubic-bezier.com/#.85,0,.15,1)
59- [`easeInBack`](https://cubic-bezier.com/#.36,0,.66,-.56)
60- [`easeOutBack`](https://cubic-bezier.com/#.34,1.56,.64,1)
61- [`easeInOutBack`](https://cubic-bezier.com/#.68,-.6,.32,1.6)
62 
63For more complex easing, a custom function can be provided.
64 
65```ts
66import { useTransition } from '@vueuse/core'
67// ---cut---
68function easeOutElastic(n) {
69  return n === 0
70    ? 0
71    : n === 1
72      ? 1
73      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
74}
75 
76useTransition(source, {
77  easing: easeOutElastic,
78})
79```
80 
81By default the `source` must be a number, or array of numbers. For more complex values, define a custom `interpolation` function. For example, the following would transition a Three.js rotation.
82 
83```ts
84import { useTransition } from '@vueuse/core'
85// ---cut---
86import { Quaternion } from 'three'
87 
88const source = ref(new Quaternion())
89 
90const output = useTransition(source, {
91  interpolation: (q1, q2, t) => new Quaternion().slerpQuaternions(q1, q2, t)
92})
93```
94 
95To control when a transition starts, set a `delay` value. To choreograph behavior around a transition, define `onStarted` or `onFinished` callbacks.
96 
97```ts
98import { useTransition } from '@vueuse/core'
99// ---cut---
100useTransition(source, {
101  delay: 1000,
102  onStarted() {
103    // called after the transition starts
104  },
105  onFinished() {
106    // called after the transition ends
107  },
108})
109```
110 
111To stop transitioning, define a boolean `disabled` property. Be aware, this is not the same a `duration` of `0`. Disabled transitions track the source value **_synchronously_**. They do not respect a `delay`, and do not fire `onStarted` or `onFinished` callbacks.
112 
113For even more control, transitions can be executed manually via the `transition` function. This function returns a promise that resolves when the transition is complete. Manual transitions can be cancelled by defining an `abort` function that returns a truthy value.
114 
115```ts
116import { transition } from '@vueuse/core'
117 
118await transition(source, from, to, {
119  abort() {
120    if (shouldAbort)
121      return true
122  }
123})
124```
125 
126## Type Declarations
127 
128```ts
129/**
130 * Cubic bezier points
131 */
132export type CubicBezierPoints = [number, number, number, number]
133/**
134 * Easing function
135 */
136export type EasingFunction = (n: number) => number
137/**
138 * Interpolation function
139 */
140export type InterpolationFunction<T> = (from: T, to: T, t: number) => T
141/**
142 * Transition options
143 */
144export interface TransitionOptions<T> extends ConfigurableWindow {
145  /**
146   * Manually abort a transition
147   */
148  abort?: () => any
149  /**
150   * Transition duration in milliseconds
151   */
152  duration?: MaybeRef<number>
153  /**
154   * Easing function or cubic bezier points to calculate transition progress
155   */
156  easing?: MaybeRef<EasingFunction | CubicBezierPoints>
157  /**
158   * Custom interpolation function
159   */
160  interpolation?: InterpolationFunction<T>
161  /**
162   * Easing function or cubic bezier points to calculate transition progress
163   * @deprecated The `transition` option is deprecated, use `easing` instead.
164   */
165  transition?: MaybeRef<EasingFunction | CubicBezierPoints>
166}
167export interface UseTransitionOptions<T> extends TransitionOptions<T> {
168  /**
169   * Milliseconds to wait before starting transition
170   */
171  delay?: MaybeRef<number>
172  /**
173   * Disables the transition
174   */
175  disabled?: MaybeRef<boolean>
176  /**
177   * Callback to execute after transition finishes
178   */
179  onFinished?: () => void
180  /**
181   * Callback to execute after transition starts
182   */
183  onStarted?: () => void
184}
185declare const _TransitionPresets: {
186  readonly easeInSine: readonly [0.12, 0, 0.39, 0]
187  readonly easeOutSine: readonly [0.61, 1, 0.88, 1]
188  readonly easeInOutSine: readonly [0.37, 0, 0.63, 1]
189  readonly easeInQuad: readonly [0.11, 0, 0.5, 0]
190  readonly easeOutQuad: readonly [0.5, 1, 0.89, 1]
191  readonly easeInOutQuad: readonly [0.45, 0, 0.55, 1]
192  readonly easeInCubic: readonly [0.32, 0, 0.67, 0]
193  readonly easeOutCubic: readonly [0.33, 1, 0.68, 1]
194  readonly easeInOutCubic: readonly [0.65, 0, 0.35, 1]
195  readonly easeInQuart: readonly [0.5, 0, 0.75, 0]
196  readonly easeOutQuart: readonly [0.25, 1, 0.5, 1]
197  readonly easeInOutQuart: readonly [0.76, 0, 0.24, 1]
198  readonly easeInQuint: readonly [0.64, 0, 0.78, 0]
199  readonly easeOutQuint: readonly [0.22, 1, 0.36, 1]
200  readonly easeInOutQuint: readonly [0.83, 0, 0.17, 1]
201  readonly easeInExpo: readonly [0.7, 0, 0.84, 0]
202  readonly easeOutExpo: readonly [0.16, 1, 0.3, 1]
203  readonly easeInOutExpo: readonly [0.87, 0, 0.13, 1]
204  readonly easeInCirc: readonly [0.55, 0, 1, 0.45]
205  readonly easeOutCirc: readonly [0, 0.55, 0.45, 1]
206  readonly easeInOutCirc: readonly [0.85, 0, 0.15, 1]
207  readonly easeInBack: readonly [0.36, 0, 0.66, -0.56]
208  readonly easeOutBack: readonly [0.34, 1.56, 0.64, 1]
209  readonly easeInOutBack: readonly [0.68, -0.6, 0.32, 1.6]
210}
211/**
212 * Common transitions
213 *
214 * @see https://easings.net
215 */
216export declare const TransitionPresets: Record<
217  keyof typeof _TransitionPresets,
218  CubicBezierPoints
219> & {
220  linear: EasingFunction
221}
222/**
223 * Transition from one value to another.
224 *
225 * @param source
226 * @param from
227 * @param to
228 * @param options
229 */
230export declare function transition<T>(
231  source: Ref<T>,
232  from: MaybeRefOrGetter<T>,
233  to: MaybeRefOrGetter<T>,
234  options?: TransitionOptions<T>,
235): PromiseLike<void>
236/**
237 * Transition from one value to another.
238 * @deprecated The `executeTransition` function is deprecated, use `transition` instead.
239 *
240 * @param source
241 * @param from
242 * @param to
243 * @param options
244 */
245export declare function executeTransition<T>(
246  source: Ref<T>,
247  from: MaybeRefOrGetter<T>,
248  to: MaybeRefOrGetter<T>,
249  options?: TransitionOptions<T>,
250): PromiseLike<void>
251export declare function useTransition<T extends MaybeRefOrGetter<number>[]>(
252  source: [...T],
253  options?: UseTransitionOptions<T>,
254): ComputedRef<{
255  [K in keyof T]: number
256}>
257export declare function useTransition<T extends MaybeRefOrGetter<number[]>>(
258  source: T,
259  options?: UseTransitionOptions<T>,
260): ComputedRef<number[]>
261export declare function useTransition<T>(
262  source: MaybeRefOrGetter<T>,
263  options?: UseTransitionOptions<T>,
264): ComputedRef<T>
265```
266