How to use transition class names to achieve animation transition effects in Vue

Vue is a popular JavaScript framework designed to simplify web application development. Among them, the transition class name is a very important feature, which allows us to achieve transition animation effects in the addition, removal and other behaviors of DOM elements. In this article, we will learn how to use transition class names in Vue to bring a richer animation experience to our web applications.

What is the Vue transition class name?

The transition class name in Vue is a set of CSS class names defined in the Vue library. These class names provide some predefined CSS transition animation effects, such as fade in, fade out, zoom in, zoom out, etc. In Vue's transition class name, we can use the following keywords:

• v-enter: The initial state before the DOM element is inserted.
• v-enter-active: The animation execution process after the DOM element is inserted.
• v-enter-to: The termination state after the DOM element is inserted.
• v-leave: The initial state before the DOM element is removed.
• v-leave-active: The animation execution process after the DOM element is removed.
• v-leave-to: The termination state after the DOM element is removed.

These class names make it easy to add and remove animation effects to DOM elements, especially in Vue's lists and conditional rendering.

How to use Vue transition class names

In Vue, we can easily add transition class names to elements through the v-bind directive and v-on directive. Below we will introduce how to use these two instructions in Vue.

Use the v-bind directive to add a transition class name

Using the v-bind directive, we can bind an object to an element and add a transition class name through the object. To achieve the transition effect, we need to add a key attribute on the element, which should be unique so that Vue can track the state of the element. For example, the following code:

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="message">Hello World!</p>
    </transition>
    <button v-on:click="toggleShow">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
}
</script>

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

In the above code, we use Vue's transition component to enable the transition effect. In the transition component, we define a transition named "fade" so that we can use .fade-enter, .fade-enter-active, .fade-enter-to, .fade-leave, .fade in CSS -leave-active, .fade-leave-to these class names. We use the v-if directive on the p element to control whether it appears, and use the key attribute to track its status. In CSS, we define two class names fade-enter-active and fade-leave-active, which are used to set the execution time of the transition animation. The functions of fade-enter and fade-leave-to are to specify the starting and ending states of elements when inserting and removing respectively.

Use the v-on directive to add a transitional class name

Using the v-on directive, we can add a transitional class name to the element through event listening. For example, the following code:

<template>
  <div>
    <transition name="scale">
      <button v-if="visible" v-on:click="hide">Hide</button>
    </transition>
    <button v-else v-on:click="show">Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
}
</script>

<style>
.scale-enter-active, .scale-leave-active {
  transition: transform .5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}
</style>

In the above code, we use the v-on directive to bind the click event to show or hide the button. When the button is displayed, we use Vue's transition component to add a transition effect named "scale" to it. In CSS, we define two class names: .scale-enter-active and .scale-leave-active, which are used to control the execution time of the transition animation. We also define two class names: .scale-enter and .scale-leave-to, which are used to specify the starting and ending states of elements when they are inserted and removed.

Summary

Vue’s transition class name provides a simple and powerful way to achieve the transition animation effect of DOM elements. We can use the v-bind and v-on directives to bind these class names to elements and control the transition effects of the elements through CSS. If you are not familiar with Vue's transition class names and animation effects, it is recommended that you do more exercises and experiments so that you can better master Vue's transition class names.

The above is the detailed content of How to use transition class names to achieve animation transition effects in Vue. For more information, please follow other related articles on the PHP Chinese website!