useTransition

类别

Animation

导出体积

912 B

上次更改

2 months ago

值之间的过渡效果

示例

源码 playground (beta)

贝塞尔曲线： 0.00

自定义函数： 0.00

向量： [0.00, 0.00]

用法

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

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

const source
 = shallowRef
(0)

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

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

const source
 = shallowRef
([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,
})

类型声明

显示类型声明

/**
 * 贝塞尔曲线点
 */
export type CubicBezierPoints
 = [number, number, number, number]
/**
 * 缓动函数
 */
export type EasingFunction
 = (n
: number) => number
/**
 * 过渡选项
 */
export interface TransitionOptions extends ConfigurableWindow {
  /**
   * 手动中止过渡
   */
  abort
?: () => any
  /**
   * 过渡持续时间（毫秒）
   */
  duration
?: MaybeRef
<number>
  /**
   * 缓动函数或用于计算过渡值的贝塞尔曲线点
   */
  transition
?: MaybeRef
<EasingFunction
 | CubicBezierPoints
>
}
export interface UseTransitionOptions extends TransitionOptions {
  /**
   * 开始过渡前等待的毫秒数
   */
  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

}
/**
 * 从一个值过渡到另一个值。
 *
 * @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[]>