useTransition
值之间的过渡效果
示例
贝塞尔曲线： 0.00
自定义函数： 0.00
向量： [0.00, 0.00]
Non-numeric value: Hello
用法
定义一个数值型的源值，当其改变时，输出值会过渡到新值。如果源值在过渡进行中发生变化，则会从中断处开始新的过渡。
ts
import { TransitionPresets, useTransition } from '@vueuse/core'
import { shallowRef } from 'vue'
const source = shallowRef(0)
const output = useTransition(source, {
duration: 1000,
easing: TransitionPresets.easeInOutCubic,
})可以使用 立方贝济耶曲线 自定义过渡缓解。
ts
useTransition(source, {
easing: [0.75, 0, 0.25, 1],
})通过 TransitionPresets 常量可使用以下过渡效果：
lineareaseInSineeaseOutSineeaseInOutSineeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInBackeaseOutBackeaseInOutBack
对于更复杂的缓动效果，可以提供自定义函数。
ts
function easeOutElastic(n) {
return n === 0
? 0
: n === 1
? 1
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}
useTransition(source, {
easing: easeOutElastic,
})By 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.
ts
import { Quaternion } from 'three'
const source = ref(new Quaternion())
const output = useTransition(source, {
interpolation: (q1, q2, t) => new Quaternion().slerpQuaternions(q1, q2, t)
})要控制过渡何时开始，设置 delay 值。要围绕过渡效果协调行为，请定义 onStarted 或 onFinished 回调函数。
ts
useTransition(source, {
delay: 1000,
onStarted() {
// 过渡开始后调用
},
onFinished() {
// 过渡结束后调用
},
})要停止过渡，定义一个布尔类型的 disabled 属性。请注意，这与 duration 为 0 并不相同。禁用的过渡会同步跟踪源值。它们不会遵循 delay，也不会触发 onStarted 或 onFinished 回调。
为了获得更多控制，可以通过 transition 函数手动执行过渡。该函数返回一个在过渡完成时解析的 promise。通过定义一个返回真值的 abort 函数，可以取消手动过渡。
ts
import { transition } from '@vueuse/core'
await transition(source, from, to, {
abort() {
if (shouldAbort)
return true
}
})类型声明
显示类型声明
ts
/**
* 贝塞尔曲线点
*/
export type CubicBezierPoints = [number, number, number, number]
/**
* 缓动函数
*/
export type EasingFunction = (n: number) => number
/**
* Interpolation function
*/
export type InterpolationFunction<T> = (from: T, to: T, t: number) => T
/**
* Transition options
*/
export interface TransitionOptions<T> extends ConfigurableWindow {
/**
* 手动中止过渡
*/
abort?: () => any
/**
* 过渡持续时间（毫秒）
*/
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>
}
export interface UseTransitionOptions<T> extends TransitionOptions<T> {
/**
* 开始过渡前等待的毫秒数
*/
delay?: MaybeRef<number>
/**
* 禁用过渡
*/
disabled?: MaybeRef<boolean>
/**
* 过渡结束后执行的回调函数
*/
onFinished?: () => void
/**
* 过渡开始后执行的回调函数
*/
onStarted?: () => void
}
declare const _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 [0.5, 1, 0.89, 1]
readonly easeInOutQuad: readonly [0.45, 0, 0.55, 1]
readonly easeInCubic: readonly [0.32, 0, 0.67, 0]
readonly easeOutCubic: readonly [0.33, 1, 0.68, 1]
readonly easeInOutCubic: readonly [0.65, 0, 0.35, 1]
readonly easeInQuart: readonly [0.5, 0, 0.75, 0]
readonly easeOutQuart: readonly [0.25, 1, 0.5, 1]
readonly easeInOutQuart: readonly [0.76, 0, 0.24, 1]
readonly easeInQuint: readonly [0.64, 0, 0.78, 0]
readonly easeOutQuint: readonly [0.22, 1, 0.36, 1]
readonly easeInOutQuint: readonly [0.83, 0, 0.17, 1]
readonly easeInExpo: readonly [0.7, 0, 0.84, 0]
readonly easeOutExpo: readonly [0.16, 1, 0.3, 1]
readonly easeInOutExpo: readonly [0.87, 0, 0.13, 1]
readonly easeInCirc: readonly [0.55, 0, 1, 0.45]
readonly easeOutCirc: readonly [0, 0.55, 0.45, 1]
readonly easeInOutCirc: readonly [0.85, 0, 0.15, 1]
readonly easeInBack: readonly [0.36, 0, 0.66, -0.56]
readonly easeOutBack: readonly [0.34, 1.56, 0.64, 1]
readonly easeInOutBack: readonly [0.68, -0.6, 0.32, 1.6]
}
/**
* Common transitions
*
* @see https://easings.net
*/
export declare const TransitionPresets: Record<
keyof typeof _TransitionPresets,
CubicBezierPoints
> & {
linear: EasingFunction
}
/**
* Transition from one value to another.
*
* @param source
* @param from
* @param to
* @param options
*/
export declare function transition<T>(
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.
*
* @param source
* @param from
* @param to
* @param options
*/
export declare function executeTransition<T>(
source: Ref<T>,
from: MaybeRefOrGetter<T>,
to: MaybeRefOrGetter<T>,
options?: TransitionOptions<T>,
): PromiseLike<void>
export declare function useTransition<T extends MaybeRefOrGetter<number>[]>(
source: [...T],
options?: UseTransitionOptions<T>,
): ComputedRef<{
[K in keyof T]: number
}>
export declare function useTransition<T extends MaybeRefOrGetter<number[]>>(
source: T,
options?: UseTransitionOptions<T>,
): ComputedRef<number[]>
export declare function useTransition<T>(
source: MaybeRefOrGetter<T>,
options?: UseTransitionOptions<T>,
): ComputedRef<T>源码
贡献者
一纸忘忧