Author -  Sai gowtham

How to create the transitions in Vue

In this tutorial, we are going to learn about Transitions in vuejs with the help of examples.

transition component

Vue provides us a <transition> wrapper component which helps us to apply transitions to html elements whenever an element is added or removed from the dom.

In <transition> component we need to add an attribute called name.

name: The name of the transition CSS class.

whenever we added a name to our transition component vuejs gives us different css classes prefixed with name.

* represents the name of your transition class.

*-enter : Initial state, this class is added one frame before our element is inserted, removed one frame after the element is inserted.

*-enter-active: This class is Applied during the entering phase. Added before an element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

-enter-to: Ending state for *-enter class. Added one frame after the element is inserted (at the same time-enter is removed), removed when transition/animation finishes.

*-leave: Added immediately when an element is leaving from the dom, removed after one frame.

*-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. This class can be used to define the duration, delay and easing curve for the leaving transition.

-leave-to: Ending state for *-leave class. Added one frame after a leaving transition is triggered (at the same time-leave is removed), removed when the transition/animation finishes.

Example

<template>
  <div id="app">
    <button @click="show = !show;">Show</button>
    <transition name="slide">       <h1 v-if="show">Vue transition</h1>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active,.slide-leave-active {  transition: transform 0.4s ease;}.slide-enter,.slide-leave-to {  transform: translateY(-50%);}</style>

In the above example, we wrapped our h1 element with transition component having name="slide".

Inside our style tags we added four classes.

.slide-enter:This class is applied one frame before our h1 element is added to the dom.

The .slide-enter-active and .slide-leave-active classes are applying transitions to our h1 element.

Transitions on Initial render

Sometimes we need to apply a transition to our elements when a page is Initially rendered into the dom in such cases we need to add a appear attribute to transition component.

Example.vue
<template>
  <div id="app">
    <transition appear name="slide">      <h1>Vue transitions</h1>
    </transition>
  </div>
</template>

<script>
export default {};
</script>

<style>
.slide-enter-active {
  transition: transform 0.4s ease;
}
.slide-enter {
  transform: translateY(-50%);
}
</style>

Transitioning List items

For transitioning list items we need to use <transition-group> component, by default transition-group wraps our list items with span tag.

We can change the default tag by adding the tag attribute to transition-group component.

List.vue
<template>
  <div>
    <transition-group name="list" tag="ul">      <li v-for="(post, i) in posts" :key="i">{{ post.title }}</li>
    </transition-group>
    <button @click="addPosts">add posts</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      posts: []
    };
  },
  methods: {
    addPosts: function() {
      this.posts.push({
        title: `${Math.floor(Math.random() * 10 + 1)} post`
      });
    }
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to  {
  opacity: 0;
  transform: translateX(-50%);
}
</style>

vue-listtransitions-example

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY