useTransition | VueUse

useTransition
​
Category
Animation
Export Size
1.15 kB
Last Changed
2 months ago

Transition between values

Demo
​

source

Transition

Cubic bezier curve: 0.00

Custom function: 0.00

Vector: [0.00, 0.00]

Usage
​

Define a numeric source value to follow, and 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.

js
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.

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})`
})

Transition easing can be customized using cubic bezier curves. Transitions defined this way work the same as CSS easing functions.

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

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.

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,
})

To control when a transition starts, set a delay value. To choreograph behavior around a transition, define onStarted or onFinished callbacks.

js
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.

For more control, transitions can be executed manually by using executeTransition. This function returns a promise that resolves upon completion. Manual transitions can be cancelled by defining an abort function that returns a truthy value.

js
import { executeTransition } from '@vueuse/core'

await executeTransition(source, from, to, {
  duration: 1000,
})
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Scott Bedard
zhiyuanzmj
Alexey Istomin
huodoushigemi
Jelf
wheat
Alex Kozack
Changelog
​
v10.1.0 on 4/22/2023
8b330 - fix: fix regression with non-linear transition functions (#2973)
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.1 on 3/23/2023
5944e - feat: support MaybeComputedRef (#2871)
v10.0.0-beta.0 on 3/14/2023
08c21 - feat(useSwipe, usePointerSwipe, useTransition): improve tree-shaking (#2863)
526d5 - feat: expose transition utility for manual control (#2743)
v9.6.0 on 11/22/2022
0a49e - fix: call pause() to stop useRafFn when disabling (#2360)
v9.1.0 on 8/4/2022
cc865 - fix: improve type of TransitionPresets
v8.9.3 on 7/14/2022
35f33 - fix!: rename type TransitionOptions to UseTransitionOptions (#1893)