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.
lineareaseInSineeaseOutSineeaseInQuadeaseOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInBackeaseOutBackeaseInOutBack
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 {@link https://easings.net}
*/
export declare const TransitionPresets: Record<string, CubicBezierPoints>
/**
* Transition between values.
*
* @see {@link /useTransition}
* @param source
* @param options
*/
export declare function useTransition(
source: Ref<number>,
options?: TransitionOptions
): Ref<number>
export {}