How to switch animation between elements and components in Vue3-Vue.js-php.cn

How to switch animation between elements and components in Vue3

PHPz

Release： 2023-05-14 14:16:11

forward

910 people have browsed it

Example analysis

Animation switching between elements

The animation switching between elements refers to two dom# Switching between ## elements, for example, one div disappears and another div is displayed. The disappearance corresponds to the fade-out effect, and the display corresponds to the fade-in effect. In this example, we use two div, one displays hello world, the other displays bye world, and then uses a button to control the switching of the animation. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素切换动画的实现</title>
    <style>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               show:false
            }
        },
        methods: {
            handleClick(){
              this.show = !this.show;
            }
        },
        template: 
        `
        <transition mode="out-in" appear>
            <div v-if="show">hello world </div>
            <div v-else="show" >bye world </div>
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

Copy after login

As shown in the above code, we use CSS to define the fade-in and fade-out effects, and then put the

div we want to animate into # Between the ## tags, use a Boolean variable show to control the display and hiding of elements. When we click the button, the handleClick function is executed to showThe variable is inverted to achieve the switching effect. In the code, we also see that a mode="out-in" is used on the transition tag. The value of this mode is actually mode=" in-out", the difference between the two is as follows:

mode="out-in"

: means that when two elements are switched, the current element disappears first and is to be displayed. The element is displayed againmode="in-out": Indicates that when two elements are switched, the element to be displayed is displayed first, and the current element disappearsReaders can switch these two elements Try all the attributes and see the effect, the impression will be deeper

In the code we see that there is an attribute appear. This attribute means that when we open the interface in the browser, the animation will be executed. Otherwise, the page will be in There is no animation when loading

Animation switching between components

In Vue, we will use components more. In fact, animation switching can also be implemented between components. Here we You can modify the above example to achieve the animation effect of switching between the above elements in the form of dynamic components. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件间切换动画的实现</title>
    <style>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 多个单组件之间的动画
    const ComponentA = {
        template:&#39;<div>hello world</div>&#39;
    }
    const ComponentB = {
        template:&#39;<div>bye world</div>&#39;
    }
 const app = Vue.createApp({
        data() {
            return {
               component:&#39;component-a&#39;
            }
        },
        methods: {
            handleClick(){
               if(this.component === &#39;component-a&#39;){
                this.component = &#39;component-b&#39;;
               }else{
                this.component = &#39;component-a&#39;;
               }
            }
        },
        components:{
            &#39;component-a&#39;:ComponentA,
            &#39;component-b&#39;:ComponentB
        },
        // 动态组件的方式
        template: 
        `
        <transition mode="out-in" appear>
            <component :is="component" />
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

Copy after login

The above is the detailed content of How to switch animation between elements and components in Vue3. For more information, please follow other related articles on the PHP Chinese website!