Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Transitions & Animations Overview

Vue.js provides several ways to control how elements and components transition in and out of the DOM. Transitions in Vue allow you to apply effects when elements are inserted, updated, or removed from the Document Object Model (DOM).

Here are some of the key points about Vue's transition system:

Transition Component
Vue provides a built-in <transition> wrapper component that allows you to add entering/leaving transitions for any element or component in the following context:
- Conditional rendering (using v-if)
- Conditional display (using v-show)
- Dynamic components
- Component root nodes
Here is a simple example:
```
<transition name="fade">
 Hello
</transition>
```
In this example, the  tag will have an automatic fade transition, because of the <transition> wrapper with the name of "fade".
CSS Transitions
Vue will automatically add/append suitable CSS classes related to the transitions:
- v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
- v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the transition.
- v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
- v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes.
In this example, a fade transition might look something like this:
```
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
```
CSS Animations
CSS animations are applied in the same way as CSS transitions, but Vue provides some extra classes for animations:
- v-enter-to: Only available in versions 2.1.8+. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
- v-leave-to: Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.
JavaScript Hooks
You can also use JavaScript to manipulate the DOM during the transition hooks. Vue provides beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, and leaveCancelled hooks that you can use.
Transitioning Between Components
Vue also allows transitioning between components with the <component> wrapper and the is special attribute.
List Transitions
Vue provides a <transition-group> component that allows you to apply transition effects to lists of items rendered with v-for.
State Transitions
Transitions can also be applied based on changes in the data properties of components, allowing for animation of both CSS properties and SVG attributes.

Vue's transition system allows you to create sophisticated enter/leave and list transitions effects with very little code. It provides integration with CSS and JavaScript animations, and it works well with Vue's built-in directives like v-if, v-show and v-for, making it a flexible system for adding transitions to your Vue.js applications.

Vue 3.0 Transition Modes: The mode attribute in <transition> determines how elements are inserted/removed. Modes include "in-out" and "out-in."
```
<transition name="fade" mode="out-in">
 I will fade
</transition>
```

CSS Transitions and Animations in Vue 3.0: Use CSS for transition effects. Vue adds classes like v-enter, v-enter-active, v-enter-to, etc.

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>

Vue 3.0 Transition Events: Vue emits transition events like @before-enter, @enter, @after-enter, etc., for custom logic.

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <p v-if="show">I will fade</p>
</transition>

Vue 3.0 Transition Hooks: Utilize transition hooks (beforeEnter, enter, afterEnter, etc.) for custom logic.
```
methods: {
  beforeEnter(el) {
    // ...
  },
  enter(el, done) {
    // ...
    done();
  },
}
```

Vue 3.0 Transition CSS Classes Binding: Dynamically bind CSS classes based on transition states.

<transition :class="{ 'fade-custom': isCustomFade }">
  <p v-if="show">I will fade</p>
</transition>

Dynamic Transitions in Vue 3.0: Change transition type dynamically based on data.

<transition :name="transitionType">
  <p v-if="show">I will fade</p>
</transition>

Customizing Transition Duration in Vue 3.0: Customize transition duration dynamically.

<transition :duration="{ enter: 1000, leave: 500 }">
  <p v-if="show">I will fade</p>
</transition>

Vue 3.0 transition-group Component: Use <transition-group> for lists, applying transitions to each item.

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

Vue 3.0 Handling Enter and Exit Transitions: Handle enter and exit transitions separately using @before-enter, @enter, etc.
```
<transition
 @before-enter="beforeEnter"
 @enter="enter"
>
 I will fade
</transition>
```
Vue 3.0 Conditional Transitions: Use conditional rendering for dynamic transitions.
```
<transition name="fade">
 I will fade
</transition>
```

Staggering Transitions in Vue 3.0: Apply staggering to transitions using v-enter and v-leave classes.

<transition name="fade" @before-enter="beforeEnter">
  <p v-if="show" v-for="item in items" :key="item.id">{{ item.text }}</p>
</transition>