useTransition
值之间的过度
Transition between values
例子
Cubic bezier curve: 0.00
Custom function: 0.00
Vector: [0.00, 0.00]
Usage
对于简单的过度,提供一个数字源值来监听。更改后,output将转换为新值。如果源在过渡过程中发生变化,则新的过渡将从前一个过渡中断的地方开始。
For simple transitions, provide a numeric source value to watch. 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.
import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'
const source = ref(0)
const output = useTransition(source, {
duration: 1000,
transition: TransitionPresets.easeInOutCubic,
})
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.
const source = ref([0, 0, 0])
const output = useTransition(source)
const color = computed(() => {
const [r, g, b] = output.value
return `rgb(${r}, ${g}, ${b})`
})
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.
useTransition(source, {
transition: [0.75, 0, 0.25, 1],
})
useTransition(source, {
transition: [0.75, 0, 0.25, 1],
})
以下过渡参数可通过常量 TransitionPresets
获得。
The following transitions are available via the TransitionPresets
constant.
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
对于更复杂的过度动画,可以自定义函数。
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(source, {
transition: easeOutElastic,
})
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(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.
useTransition(source, {
delay: 1000,
onStarted() {
// called after the transition starts
},
onFinished() {
// called after the transition ends
},
})
useTransition(source, {
delay: 1000,
onStarted() {
// called after the transition starts
},
onFinished() {
// called after the transition ends
},
})
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.
类型声明(Type Declarations)
显示类型声明
/**
* Cubic bezier points
*/
export type CubicBezierPoints = [number, number, number, number]
/**
* Easing function
*/
export type EasingFunction = (n: number) => number
/**
* Transition options
*/
export interface UseTransitionOptions {
/**
* Milliseconds to wait before starting transition
*/
delay?: MaybeRef<number>
/**
* Disables the transition
*/
disabled?: MaybeRef<boolean>
/**
* Transition duration in milliseconds
*/
duration?: MaybeRef<number>
/**
* Callback to execute after transition finishes
*/
onFinished?: () => void
/**
* Callback to execute after transition starts
*/
onStarted?: () => void
/**
* Easing function or cubic bezier points for calculating transition values
*/
transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}
/**
* 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
}
export declare function useTransition(
source: Ref<number>,
options?: UseTransitionOptions
): ComputedRef<number>
export declare function useTransition<T extends MaybeRef<number>[]>(
source: [...T],
options?: UseTransitionOptions
): ComputedRef<{
[K in keyof T]: number
}>
export declare function useTransition<T extends Ref<number[]>>(
source: T,
options?: UseTransitionOptions
): ComputedRef<number[]>
/**
* Cubic bezier points
*/
export type CubicBezierPoints = [number, number, number, number]
/**
* Easing function
*/
export type EasingFunction = (n: number) => number
/**
* Transition options
*/
export interface UseTransitionOptions {
/**
* Milliseconds to wait before starting transition
*/
delay?: MaybeRef<number>
/**
* Disables the transition
*/
disabled?: MaybeRef<boolean>
/**
* Transition duration in milliseconds
*/
duration?: MaybeRef<number>
/**
* Callback to execute after transition finishes
*/
onFinished?: () => void
/**
* Callback to execute after transition starts
*/
onStarted?: () => void
/**
* Easing function or cubic bezier points for calculating transition values
*/
transition?: MaybeRef<EasingFunction | CubicBezierPoints>
}
/**
* 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
}
export declare function useTransition(
source: Ref<number>,
options?: UseTransitionOptions
): ComputedRef<number>
export declare function useTransition<T extends MaybeRef<number>[]>(
source: [...T],
options?: UseTransitionOptions
): ComputedRef<{
[K in keyof T]: number
}>
export declare function useTransition<T extends Ref<number[]>>(
source: T,
options?: UseTransitionOptions
): ComputedRef<number[]>