useTransition

Demo

贝塞尔曲线： 0.00

自定义函数： 0.00

向量： [0.00, 0.00]

用法

定义一个数值型的源值，当其改变时，输出值会过渡到新值。如果源值在过渡进行中发生变化，则会从中断处开始新的过渡。

import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'

const source = ref(0)

const output = useTransition(source, {
  duration: 1000,
  transition: TransitionPresets.easeInOutCubic,
})

为了同步过渡，可以使用数字数组。以下是一个在颜色之间过渡的示例。

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 缓动函数相同的方式定义过渡。

useTransition(source, {
  transition: [0.75, 0, 0.25, 1],
})

通过 TransitionPresets 常量可使用以下过渡效果：

对于更复杂的过渡效果，可以提供自定义函数。

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 回调函数。

useTransition(source, {
  delay: 1000,
  onStarted() {
    // 过渡开始后调用
  },
  onFinished() {
    // 过渡结束后调用
  },
})

要暂时停止过渡，定义一个布尔型 disabled 属性。请注意，这与 duration 为 0 不同。禁用过渡会同步跟踪源值。它们不会遵循 delay，也不会触发 onStarted 或 onFinished 回调函数。

要更精确地控制，可以使用 executeTransition 手动执行过渡。此函数返回一个在完成后解析的 promise。手动过渡可以通过定义一个返回真值的 abort 函数来取消。

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[]>