主题
useTransition
值之间的转换
¥Transition between values
示例
Cubic bezier curve: 0.00
Custom function: 0.00
Vector: [0.00, 0.00]
用法
¥Usage
定义要遵循的数字源值，更改后输出将转换为新值。如果在转换过程中源发生变化，则新的转换将从前一个转换被中断的位置开始。
¥Define a numeric 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.
js
import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'
const source = ref(0)
const output = useTransition(source, {
duration: 1000,
transition: TransitionPresets.easeInOutCubic,
})要同步转换，请使用数字数组。作为示例，以下是我们如何在颜色之间进行转换的方法。
¥To synchronize transitions, use an array of numbers. As an example, here is how we could transition between colors.
js
const source = ref([0, 0, 0])
const output = useTransition(source)
const color = computed(() => {
const [r, g, b] = output.value
return `rgb(${r}, ${g}, ${b})`
})可以使用三次贝塞尔曲线自定义转场缓动。以这种方式定义的转换与 CSS 缓动函数 的工作方式相同。
¥Transition easing can be customized using cubic bezier curves. Transitions defined this way work the same as CSS easing functions.
js
useTransition(source, {
transition: [0.75, 0, 0.25, 1],
})通过 TransitionPresets 常量可以实现以下转换。
¥The following transitions are available via the TransitionPresets constant.
对于更复杂的转换，可以提供自定义函数。
¥For more complex transitions, a custom function can be provided.
js
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, {
transition: easeOutElastic,
})要控制转换何时开始，请设置 delay 值。要围绕转换编排行为，请定义 onStarted 或 onFinished 回调。
¥To control when a transition starts, set a delay value. To choreograph behavior around a transition, define onStarted or onFinished callbacks.
js
useTransition(source, {
delay: 1000,
onStarted() {
// called after the transition starts
},
onFinished() {
// called after the transition ends
},
})要暂时停止转换，请定义布尔值 disabled 属性。请注意，这与 duration 或 0 不同。禁用的转换同步跟踪源值。它们不尊重 delay，也不触发 onStarted 或 onFinished 回调。
¥To temporarily 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.
为了获得更多控制，可以使用 executeTransition 手动执行转换。该函数返回一个在完成时解析的 promise。可以通过定义返回真值的 abort 函数来取消手动转换。
¥For more control, transitions can be executed manually by using executeTransition. This function returns a promise that resolves upon completion. Manual transitions can be cancelled by defining an abort function that returns a truthy value.
js
import { executeTransition } from '@vueuse/core'
await executeTransition(source, from, to, {
duration: 1000,
})类型声明
显示类型声明
typescript
/**
* Cubic bezier points
*/
export type CubicBezierPoints = [number, number, number, number]
/**
* Easing function
*/
export type EasingFunction = (n: number) => number
/**
* Transition options
*/
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>
}
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
}
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 executeTransition<T extends number | number[]>(
source: Ref<T>,
from: MaybeRefOrGetter<T>,
to: MaybeRefOrGetter<T>,
options?: TransitionOptions,
): PromiseLike<void>
export declare function useTransition(
source: MaybeRefOrGetter<number>,
options?: UseTransitionOptions,
): ComputedRef<number>
export declare function useTransition<T extends MaybeRefOrGetter<number>[]>(
source: [...T],
options?: UseTransitionOptions,
): ComputedRef<{
[K in keyof T]: number
}>
export declare function useTransition<T extends MaybeRefOrGetter<number[]>>(
source: T,
options?: UseTransitionOptions,
): ComputedRef<number[]>