useTransition

分类

动画

导出大小

912 B

上次更改

上个月

在值之间进行过渡

演示

源代码在线演练 (beta)

三次贝塞尔曲线：0.00

自定义函数：0.00

向量：[0.00, 0.00]

非数字值：Hello

用法

定义一个要跟随的源值，当它改变时，输出将过渡到新值。如果源在过渡进行中发生变化，新的过渡将从前一个中断的地方开始。

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

const source
 = shallowRef
(0)

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

过渡缓动可以通过使用三次贝塞尔曲线来定制。

useTransition
(source, {
  easing
: [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, {
  easing
: easeOutElastic
,
})

默认情况下，source必须是数字或数字数组。对于更复杂的值，定义一个自定义的interpolation函数。例如，以下将过渡Three.js的旋转。

import { Quaternion
 } from 'three'

const source
 = ref
(new Quaternion
())

const output
 = useTransition
(source
, {
  interpolation
: (q1
, q2
, t
) => new Quaternion
().slerpQuaternions(q1
, q2
, t
)
})

要控制过渡何时开始，请设置delay值。要在过渡周围协调行为，请定义onStarted或onFinished回调。

useTransition
(source, {
  delay
: 1000,
  onStarted
() {
    // called after the transition starts
  },
  onFinished
() {
    // called after the transition ends
  },
})

要停止过渡，定义一个布尔型的disabled属性。请注意，这与duration为0的情况不同。禁用过渡会**同步**跟踪源值。它们不遵守delay，并且不会触发onStarted或onFinished回调。

为了获得更多控制，可以通过transition函数手动执行过渡。此函数返回一个Promise，该Promise在过渡完成时解析。手动过渡可以通过定义一个返回真值的abort函数来取消。

import { transition
 } from '@vueuse/core'

await transition
(source, from, to, {
  abort
() {
    if (shouldAbort)
      return true
  }
})

类型声明

显示类型声明

/**
 * Cubic bezier points
 */
export type CubicBezierPoints
 = [number, number, number, number]
/**
 * Easing function
 */
export type EasingFunction
 = (n
: number) => number
/**
 * Interpolation function
 */
export type InterpolationFunction
<T
> = (from
: T
, to
: T
, t
: number) => T

/**
 * Transition options
 */
export interface TransitionOptions
<T
> extends ConfigurableWindow {
  /**
   * Manually abort a transition
   */
  abort
?: () => any
  /**
   * Transition duration in milliseconds
   */
  duration
?: MaybeRef
<number>
  /**
   * Easing function or cubic bezier points to calculate transition progress
   */
  easing
?: MaybeRef
<EasingFunction
 | CubicBezierPoints
>
  /**
   * Custom interpolation function
   */
  interpolation
?: InterpolationFunction
<T
>
  /**
   * Easing function or cubic bezier points to calculate transition progress
   * @deprecated The `transition` option is deprecated, use `easing` instead.
   */
  transition
?: MaybeRef
<EasingFunction
 | CubicBezierPoints
>
}
export interface UseTransitionOptions
<T
> extends TransitionOptions
<T
> {
  /**
   * 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 transition
<T
>(
  source
: Ref
<T
>,
  from
: MaybeRefOrGetter
<T
>,
  to
: MaybeRefOrGetter
<T
>,
  options
?: TransitionOptions
<T
>,
): PromiseLike
<void>
/**
 * Transition from one value to another.
 * @deprecated The `executeTransition` function is deprecated, use `transition` instead.
 *
 * @param source
 * @param from
 * @param to
 * @param options
 */
export declare function executeTransition
<T
>(
  source
: Ref
<T
>,
  from
: MaybeRefOrGetter
<T
>,
  to
: MaybeRefOrGetter
<T
>,
  options
?: TransitionOptions
<T
>,
): PromiseLike
<void>
export declare function useTransition
<T
 extends MaybeRefOrGetter
<number>[]>(
  source
: [...T
],
  options
?: UseTransitionOptions
<T
>,
): ComputedRef
<{
  [K
 in keyof T
]: number
}>
export declare function useTransition
<T
 extends MaybeRefOrGetter
<number[]>>(
  source
: T
,
  options
?: UseTransitionOptions
<T
>,
): ComputedRef
<number[]>
export declare function useTransition
<T
>(
  source
: MaybeRefOrGetter
<T
>,
  options
?: UseTransitionOptions
<T
>,
): ComputedRef
<T
>