Transition component in Vue3: realizing component transition effect

The transition component in Vue3: Implementing component transition effects

Vue3 is a brand-new version recently launched, which has made many improvements in performance and development experience. At the same time, Vue3 also provides more features and functions, one of the important functions is the transition component. In Vue3, the transition component can be used to implement the transition effect of components, thereby making the UI richer and more vivid.

What is the transition component?

In Vue3, the transition component is a very useful component, which can be used to add transition effects to components. In layman's terms, there will be some animation effects when components appear and disappear. This animation effect can be fade in and fade out, zoom in and out, etc., which is very practical.

Use transition component to achieve transition effect

To use transition component to achieve component transition effect, we need to master some basic knowledge points first. The first is the basic use of transition components. The following is a code example of basic usage:

<template>
    <transition name="fade">
        <div v-if="show">我是一个div组件</div>
    </transition>
    
    <button @click="toggleShow">切换组件</button>
</template>

<script>
export default {
    data() {
        return {
            show: true
        };
    },
    
    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 first define a transition component, and then define a div component in the transition component. This div component will only be displayed when show is true. The following is an explanation of the code:

• An attribute named "fade" is defined on the transition tag. This attribute indicates that during the animation process, "fade-" will be added in front of the CSS class name. " prefix. The detailed description of CSS class names will be discussed later.
• Judge the value of show in v-if. If it is true, it will be displayed, if it is false, it will be hidden.
• In the style, we define classes named "fade-enter", "fade-leave-to", "fade-enter-active", and "fade-leave-active". These class names are composed of the name "fade" we defined in the attribute plus a prefix.
• When the component changes from hidden to displayed, Vue will automatically add the class name "fade-enter" to the component. At this time, we can set the initial state of the component through CSS. In the same way, when a component changes from displayed to hidden, Vue will automatically add the class name "fade-leave-to" to the component. At this time, we can set the final state of the component through CSS.
• Set the CSS transition property in "fade-enter-active" and "fade-leave-active", which represents the duration of the animation. Here we set it to 0.5 seconds.
• Through the above steps, we successfully added a fade-in and fade-out transition effect to the div component.

CSS class name of transition component

In the above code we used the class names "fade-enter", "fade-leave-to", "fade-enter- active", and "fade-leave-active". These class names are built-in to the transition component, but we need to set their prefix according to the name attribute of the transition. When Vue detects the entry or exit of an element, it will add the following class names in sequence:

• [name]-enter: The starting state of entry. This class name is added to the element as soon as it is added to the DOM.
• [name]-enter-active: Entering transition state. This class name will be added to the element immediately after entering the state.
• [name]-enter-to: The end state of entry. This class name will be added to the element at the end of the entry state.
• [name]-leave: The starting state of leaving. This class name is added to the element as soon as it leaves the DOM.
• [name]-leave-active: Leave transition state. This class name will be added to the element immediately after the exit state ends.
• [name]-leave-to: The end status of leaving. This class name will be added to the element at the end of the leave state.

We can define the initial, intermediate, and final states of the transition effect for the component based on these class names.

Summary

In Vue3, the transition component is the basic component used to achieve component transition effects. It allows us to add some rich visual effects to components, thereby improving the user's interactive experience. When using the transition component, we need to first master the basic usage methods and related CSS class names, so that we can take advantage of it in actual projects.

The above is the detailed content of Transition component in Vue3: realizing component transition effect. For more information, please follow other related articles on the PHP Chinese website!