Vue.js provides us with libraries for creating simple CSS transitions with the transition component for creating transition for single elements or components.

It also has the transition-group component for creating transitions for list items.

Transition

We can use the transition component as follows:

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.9s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

We have the CSS for the transition.

The transition translates the p element that wrapped in the transition component by sliding it 20px to the right.

It also changes the opacity of the element as the sliding occurs.

In the component code, we have the show state to toggle on and off the p element.

The prefix of the classes has to match the name prop of the transition class.

The button changes the value of show.

Then when we click the Toggle button, we’ll see the hello text slide to the right and fade and vice versa if we click on the button.

Transition Group

If we want to create transitions for a list of elements or components, we have to use the transition-group component.

To use it, we write:

<template>
  <div id="app">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      nextNum: 5
    };
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length);
    },
    add() {
      this.items.splice(this.randomIndex(), 0, ++this.nextNum);
    },
    remove() {
      this.items.splice(this.randomIndex(), 1);
    }
  }
};
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

The code above, has an items array, which is rendered inside the transition-group component.

In the methods property, we have the randomIndex method to generate a random index to insert items into.

The item is this.nextNum plus 1.

The add method does the insertion of the item.

remove removes an item from a random index.

In the template, we have Add and Remove buttons to add and remove entries.

They call the methods to do that.

In the styles section, we have the styles for the CSS transition.

The prefix of the classes has to match the name prop of the transition class.

We translate the items being removed before it disappears.

Opacity is also turned to 0 before removal.

When we click Add, we have transition: all to apply all changes properties.

When we click on Remove, we get the list-leave-to transition.

Therefore, we get the opacity changing transition when we add or remove an entry.