Vue动画之三: 多元素 、多组件

2018-09-05  本文已影响0人  婷诗漾

今天给大家, 介绍一下, 怎样在Vue中实现多元素和多组件的动画。
1、多元素实现的代码
注意: transition-group 标签, 包含多个元素, 使用它,必须对子组件添加key 属性。否则报错。

<head>
<meta charset="UTF-8">
<title> Vue 中夺多个元素 或组件的过渡</title>
<script src = "vue.js"></script>
<style>
    
    .v-enter, .v-leave-to { 
        opacity : 0;    
    }

    .v-enter-active, .v-leave-active {
        transition: opacity 1s;

    }

</style>

</head>
<body>

<!-- 必须得 key 值, 要不然会报错 -->

<div id = "myApp"> 
    <transition-group>
        
        <div v-if = "show" key = "hello" >
            Good morning, world!
        </div>

        <div v-else key = "bye">
            Good evening, World!
        </div>


    </transition-group>
    <button @click = "handleClick"> Toggle </button>
    

</div>
<script>
    
    new Vue({
        el : "#myApp",
        data : {
            show : true 
        },
        methods : {

            handleClick : function() {
                this.show = !this.show
            }

        }
    }) 

</script>
</body>

2、在组件中实现动画
注: transition 标签
mode 是过渡模式:
in-out : 先进来, 后出去
out-in : 先出去, 后进来;
:is , vue中动态进行换组件,:is = "组件名称"

<head>
<meta charset="UTF-8">
<title> Vue 中夺多个元素 或组件的过渡</title>
<script src = "vue.js"></script>
<style>
    
    .v-enter, .v-leave-to { 
        opacity : 0;    
    }

    .v-enter-active, .v-leave-active {
        transition: opacity 1s;
    }

</style>

</head>
<body>

<!-- 必须得 key 值, 要不然会报错 -->

<div id = "myApp"> 

    <transition mode = "out-in">

        <component :is="type"></component>

    </transition>

    <button @click = "handleClick"> Toggle </button>

</div>
<script>

    Vue.component('child', {
        template : "<div> Child</div>"
    });

    Vue.component("child-one", {
        template : "<div> Child-One </div>"
    })

    
    new Vue({
        el : "#myApp",
        data : {
            type : "child" 
        },
        methods : {

            handleClick : function() {
                this.type = this.type === "child" ? "child-one" : "child"
            }

        }
    }) 
</script>

</body>
上一篇 下一篇

猜你喜欢

热点阅读