Chapter 111: Vue transitions

Core Idea

Define animation behavior with Motion for Vue's transition prop. Choose time-based or physics-based animations. Customize duration, easing, delay, and repeat.

Key Concepts

• Setting a transition: transition can be set on any animation prop
• Value-specific transitions: When animating multiple values
• Default transitions: It's possible to set default transitions via the transition prop.
• Transition settings: Default: Dynamic
• type: Default: Dynamic
• Spring visualiser: Default: 0.3 (or 0.8 if multiple keyframes are defined)
• Tween: Default: 0.3 (or 0.8 if multiple keyframes are defined)
• duration: Default: 0.3 (or 0.8 if multiple keyframes are defined)
• ease: The easing function to use with tween animations.

Code Examples

const transition = {
  duration: 0.8,
  delay: 0.5,
  ease: [0, 0.71, 0.2, 1.01],
}

• What it demonstrates: Core usage pattern for Vue transitions.

Key Takeaways

1. Vue transitions supports Setting a transition.
2. Vue transitions supports Value-specific transitions.
3. Vue transitions supports Default transitions.

Connects To

• MotionConfig: related Motion doc page.
• Easing functions: related Motion doc page.
• Install the Motion AI Kit: related Motion doc page.
• Vue <motion /> component: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.