Transition

Vue.js transitions are a vital aspect of creating modern, interactive web applications. They allow developers to animate elements as they are added, updated, or removed from the DOM, enhancing user experience and providing a more polished feel to the application. With Vue 3, the transition system has been revamped and integrated seamlessly with the composition API, offering developers more flexibility and control over animations. In this topic, we will delve deep into Vue's transition component, explore various transition effects, learn how to customize transitions and master the art of creating dynamic animations in Vue.js applications.

Transitions in vue

Imagine a website where you click a button, and a new section fades in gracefully, accompanied by a subtle animation. This smooth transition not only enhances the user experience but also adds a touch of polish to your application. This is where Vue's transition component comes into play, allowing you to effortlessly integrate animations into your user interface.

The <Transition> is a built-in component that acts as a wrapper, embracing elements or even entire components. Its true power lies in its ability to automatically manage CSS classes, adding and removing them at precise moments to trigger visually pleasing animations during various state changes within your application. This choreography of classes seamlessly blends the animation experience into your application's flow.

Vue's transitions respond to a variety of triggers, ensuring you have the flexibility to implement them in different scenarios within your application. Let's delve into the most common triggers:

1. Conditional Rendering: Utilizing the v-if directive, you can control the visibility of elements based on specific conditions. When the condition changes and the element needs to appear or disappear, the <Transition> component takes over, gracefully animating the element's entry or exit from the DOM.

2. Dynamic Components: Imagine a dynamic interface where components swap in and out based on user interaction. The <Transition> component shines in these scenarios, ensuring a smooth transition between components, and preventing any jarring interruptions in the user's experience.

3. The Power of the key Attribute: When working with lists, the key attribute plays a crucial role in efficiently reordering elements. The <Transition> component recognizes changes in the key attribute and gracefully animates the reordering process, providing a visually appealing experience for the user.

Creating a transition

Let's create a simple button that toggles an element's visibility with a fade-in transition. Here's the code:

<template>
    <button @click="show = !show" type="button">Toggle</button>
    <Transition name="fade">
      <p v-if="show">This is a hidden element</p>
    </Transition>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
</script>

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

The above code snippet utilizes the <Transition> component in Vue.js to animate the visibility toggling of an element. Initially, there's a button labeled "Toggle", which, when clicked, toggles the value of the show variable. Inside the Transition component, there's a <p> element that is conditionally rendered based on the value of show. When show is true, the <p> element is visible, and when it's false, it's hidden. The CSS classes .fade-enter-active and .fade-leave-active are utilized to define the transition effect when the element enters or leaves, respectively. The .fade-enter and .fade-leave-to classes control the opacity of the element during the transition. These classes are applied at specific phases of the transition, allowing you to define the animation behavior and learn more about them in the next sections. Overall, this setup creates a fade-in/fade-out effect when toggling the visibility of the paragraph element.

Here's the output of the above code snippet:

Customizing transitions

Vue's transition system offers various ways to customize transitions according to your application's needs. You can leverage Vue's transition classes and JavaScript hooks to achieve more complex animations and effects.

Using Transition Classes: Vue.js employs six classes for enter/leave transitions, each serving a distinct purpose in orchestrating the animation sequence:

1. v-enter-from: This class represents the starting state for an enter transition. It is added to the element before insertion and removed one frame after the element is inserted. Developers can use this class to define the initial appearance or styling of the entering element.

2. v-enter-active: The v-enter-active class signifies the active state during an enter transition. It remains applied throughout the entire entering phase, from before the element is inserted until the transition completes. Developers can utilize this class to specify the duration, delay, and easing curve for the entering transition, thereby controlling the animation's timing and behavior.

3. v-enter-to: This class represents the ending state for an enter transition. It is added one frame after the element is inserted, concurrently with the removal of the v-enter-from class, and removed when the transition completes. Developers can use this class to define the final appearance or styling of the entering element.

4. v-leave-from: The v-leave-from class denotes the starting state for a leave transition. It is added immediately when a leaving transition is triggered and removed after one frame. Developers can apply this class to specify any necessary styling changes or preparations before the element leaves the view.

5. v-leave-active: Similar to v-enter-active, the v-leave-active class represents the active state during a leave transition. It remains applied throughout the entire leaving phase, from the moment a leaving transition is triggered until the transition concludes. Developers can leverage this class to define the duration, delay, and easing curve for the leaving transition, exerting control over the animation's timing and behavior.

6. v-leave-to: The v-leave-to class indicates the ending state for a leave transition. It is added one frame after a leaving transition is triggered, concurrently with the removal of the v-leave-from class, and removed when the transition completes. Developers can utilize this class to define the final appearance or styling of the leaving element.

A transition can be named via the name prop:

<Transition name="fade">
  ...
</Transition>

For a named transition, its transition classes will be prefixed with its name instead of v. For example, the applied class for the above transition will be fade-enter-active instead of v-enter-active. The CSS for the fade transition should look the same as shown in the example of Creating a transition.

JavaScript Hooks: While transition classes offer a convenient way to apply CSS transitions, JavaScript hooks provide a more dynamic approach by allowing developers to inject custom logic into the transition process. These hooks enable finer-grained control over transitions, making it possible to execute specific actions before, during, or after a transition occurs.

Let's explore the available JavaScript hooks:

• beforeEnter(el): Invoked before an element is inserted into the DOM, providing an opportunity to apply initial styling or prepare the element for transition.

• enter(el, done): Executed during the insertion process, allowing for dynamic styling changes or asynchronous operations. The done callback signals the completion of the transition.

• leave(el, done): Triggered when an element is about to be removed from the DOM, facilitating the execution of exit animations or cleanup tasks. Similar to enter, the done callback indicates the completion of the transition.

Here's an example:

<template>
    <button @click="toggle" type="button">Toggle Element</button>
    <Transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave">
      
      <div v-if="show" class="element">
        Element
      </div>
    </Transition>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const toggle = () => {
  show.value = !show.value;
};

const beforeEnter = (element) => {
  console.log('Before Enter');
  element.style.opacity = '0';
};

const enter = (element, done) => {
  console.log('Enter');
  setTimeout(() => {
    element.style.opacity = '1';
    done();
  }, 1000);
};

const leave = (element, done) => {
  console.log('Leave');
  element.style.opacity = '0';
  setTimeout(done, 1000);
};
</script>

<style>
.element {
  transition: opacity 1s;
}
</style>

The above example utilizes the Transition component and JavaScript hooks for finer control over CSS transitions. The beforeEnter, enter, and leave hooks are employed to manage the transition states before, during, and after element insertion or removal. When toggling the element's visibility with the "Toggle Element" button, these hooks execute custom logic to control opacity changes, creating a smooth fade-in/fade-out effect for 1 second. The console.log statements within each hook provide insight into the transition process.

Here's the result of the above code:

Conclusion

Vue.js transitions are indispensable for creating modern, interactive web applications. They provide a seamless way to animate elements during various state changes, significantly enhancing user experience and adding polish to your application. With Vue 3, transitions have been revamped and integrated seamlessly with the composition API, offering developers more flexibility and control over animations.