Vue .js page transition fade effect with vue - router

Vue.js Page Transition and Fade Effects

In Vue.js, page transitions and animations can be implemented using the <transition> element. This element provides multiple approaches to apply transition effects to elements and components. These effects can be achieved through CSS transitions and animations or JavaScript hooks.

CSS Transition Example:

html
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
}
</script>

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

In the above example, .fade-enter-active and .fade-leave-active define the transition duration and type for element entry and exit. .fade-enter and .fade-leave-to specify the initial and final states.

Vue-router with Page Transitions

When integrated with Vue-router, wrapping the route view (<router-view>) with a <transition> element enables smooth transitions between routes.

Route Transition Example:

html
<template>
  <div id="app">
    <transition name="slide" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Here, we define a transition named slide. When the route changes, the new page slides in from the right while the old page slides out of the screen.

Real-World Application Example

In a backend management system for an e-commerce platform, I was responsible for optimizing the user interface and enhancing user experience. By implementing Vue.js transition effects, we added fade animations to product addition and editing interfaces, making interface changes less abrupt and resulting in a smoother, more natural user experience. Whenever switching to different product categories or detailed information pages, the page content features a fade-in and fade-out transition effect, significantly improving visual appeal and user satisfaction.