Vue学习笔记5.5 多个元素/组件过渡动画--看注释就好没啥难度

最新推荐文章于 2022-07-28 11:23:11 发布

@凌晨三点半

最新推荐文章于 2022-07-28 11:23:11 发布

阅读量131

点赞数 1

分类专栏： Vue.js 文章标签： Vue过渡动画

本文链接：https://blog.csdn.net/soulwyb/article/details/87175894

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue多个元素或组件过渡动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }
        
        .v-enter-to,
        .v-leave-to {
            transition: opacity 1s;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition mode="out-in">
        <!-- 1. 多个元素切换需要带上给元素取个key值 不然会代码复用使动画无效 -->
            <!-- <div v-if="show" key="hello">Hello World</div>
            <div v-else key="bye">Bye World</div> -->
        <!-- 2. 组件的动画过度跟元素的一样 -->
            <!-- <child v-if="show"></child>
            <child-one v-else></child-one> -->
        <!-- 3. 动态组件的过渡方式，其实就是外面套个transition元素和添加动画样式就完事了 -->
            <conponent :is="show"></conponent>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</body>
<script>
    Vue.component('child', {
        template: "<div>child</div>"
    })
    Vue.component('child-one', {
        template: "<div>child-one</div>"
    })
    var vm = new Vue({
        el: '#app',
        data: {
            // show: true
            show: 'child'
        },
        methods: {
            handleClick: function() {
                // this.show = this.show ? false : true
                this.show = this.show === 'child' ? 'child-one' : 'child'
            }
        }
    })
</script>

</html>