useTransition
值之间的过渡效果
Demo
贝塞尔曲线: 0.00
自定义函数: 0.00
向量: [0.00, 0.00]
用法
定义一个数值型的源值,当其改变时,输出值会过渡到新值。如果源值在过渡进行中发生变化,则会从中断处开始新的过渡。
js
import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'
const source = ref(0)
const output = useTransition(source, {
duration: 1000,
transition: TransitionPresets.easeInOutCubic,
})
为了同步过渡,可以使用数字数组。以下是一个在颜色之间过渡的示例。
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 缓动函数 相同的方式定义过渡。
js
useTransition(source, {
transition: [0.75, 0, 0.25, 1],
})
通过 TransitionPresets
常量可使用以下过渡效果:
linear
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack
对于更复杂的过渡效果,可以提供自定义函数。
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
回调函数。
js
useTransition(source, {
delay: 1000,
onStarted() {
// 过渡开始后调用
},
onFinished() {
// 过渡结束后调用
},
})
要暂时停止过渡,定义一个布尔型 disabled
属性。请注意,这与 duration
为 0
不同。禁用过渡会同步跟踪源值。它们不会遵循 delay
,也不会触发 onStarted
或 onFinished
回调函数。
要更精确地控制,可以使用 executeTransition
手动执行过渡。此函数返回一个在完成后解析的 promise。手动过渡可以通过定义一个返回真值的 abort
函数来取消。
js
import { executeTransition } from '@vueuse/core'
await executeTransition(source, from, to, {
duration: 1000,
})
类型声明
显示类型声明
typescript
/**
* 贝塞尔曲线点
*/
export type CubicBezierPoints = [number, number, number, number]
/**
* 缓动函数
*/
export type EasingFunction = (n: number) => number
/**
* 过渡选项
*/
export interface TransitionOptions {
/**
* 手动中止过渡
*/
abort?: () => any
/**
* 过渡持续时间(毫秒)
*/
duration?: MaybeRef<number>
/**
* 缓动函数或用于计算过渡值的贝塞尔曲线点
*/
transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}
export interface UseTransitionOptions extends TransitionOptions {
/**
* 开始过渡前等待的毫秒数
*/
delay?: MaybeRef<number>
/**
* 禁用过渡
*/
disabled?: MaybeRef<boolean>
/**
* 过渡结束后执行的回调函数
*/
onFinished?: () => void
/**
* 过渡开始后执行的回调函数
*/
onStarted?: () => void
}
/**
* Common transitions
*
* @see https://easings.net
*/
export declare const TransitionPresets: Record<
| "easeInSine"
| "easeOutSine"
| "easeInOutSine"
| "easeInQuad"
| "easeOutQuad"
| "easeInOutQuad"
| "easeInCubic"
| "easeOutCubic"
| "easeInOutCubic"
| "easeInQuart"
| "easeOutQuart"
| "easeInOutQuart"
| "easeInQuint"
| "easeOutQuint"
| "easeInOutQuint"
| "easeInExpo"
| "easeOutExpo"
| "easeInOutExpo"
| "easeInCirc"
| "easeOutCirc"
| "easeInOutCirc"
| "easeInBack"
| "easeOutBack"
| "easeInOutBack",
CubicBezierPoints
> & {
linear: EasingFunction
}
/**
* 从一个值过渡到另一个值。
*
* @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[]>
Source
贡献者
变更日志
v10.1.0
on 4/22/2023v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue
v10.0.0-beta.1
on 3/23/2023v10.0.0-beta.0
on 3/14/2023v9.6.0
on 11/22/2022v9.1.0
on 8/4/2022cc865
- fix: improve type of TransitionPresets