Vue2.5开发去哪儿网App 第五章笔记 下

1. 多个元素或组件的过渡

多个元素的过渡：

<style>
    .v-enter,.v-leace-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity 1s;
    }
</style>
 <transition mode="out-in">
        <div v-if="show" key="hello">hello world</div>
        <div v-else key="bye">Bye world</div>
    </transition>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个元素或组件的过渡</title>
    <script src="../../vue.js"></script>
    <style>
        .v-enter,.v-leace-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition mode="out-in">
        <div v-if="show" key="hello">hello world</div>
        <div v-else key="bye">Bye world</div>
    </transition>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods: {
            handleCLick: function () {
                this.show = !this.show
            },
        }
    })
</script>
</body>
</html>
View Code

多个组件的过渡：

    <transition>
        <child-one v-if="show"></child-one>
        <child-two v-else></child-two>
    </transition>

通过component标签

    <transition mode="out-in">
        <component :is="type">

        </component>
    </transition>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个元素或组件的过渡</title>
    <script src="../../vue.js"></script>
    <style>
        .v-enter,.v-leace-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<transition mode="out-in">-->
        <!--<div v-if="show" key="hello">hello world</div>-->
        <!--<div v-else key="bye">Bye world</div>-->
    <!--</transition>-->

    <!--<transition>-->
        <!--<child-one v-if="show"></child-one>-->
        <!--<child-two v-else></child-two>-->
    <!--</transition>-->
    <!--<button @click="handleCLick">click me</button>-->
    <!--通过动态组件的方式-->
    <transition mode="out-in">
        <component :is="type">

        </component>
    </transition>
    <button @click="handlechildCLick">click me</button>
</div>
<script>
    Vue.component('child-one',{
        template:'<div>child one</div>'
    })

    Vue.component('child-two',{
        template:'<div>child two</div>'
    })

    var vm = new Vue({
        el:"#app",
        data:{
            show:true,
            type:'child-one'
        },
        methods: {
            handleCLick: function () {
                this.show = !this.show
            },
            handlechildCLick:function () {
                this.type = this.type==='child-one'?'child-two':'child-one'
            }
        }
    })
</script>
</body>
</html>
View Code
2.列表过渡
    <transition-group>
        <div v-for="item in list" :key="item.id">
            {{item.title}}
        </div>
    </transition-group>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过渡</title>
    <script src="../../vue.js"></script>
    <style>
        .v-enter,.v-leace-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition-group>
        <div v-for="item in list" :key="item.id">
            {{item.title}}
        </div>
    </transition-group>
    <button @click="handleCLick">click me</button>
</div>
<script>
    var count = 0;
    var vm = new Vue({
        el:"#app",
        data:{
            list:[]
        },
        methods:{
            handleCLick:function () {
                this.list.push({
                    id:count++,
                    title:'hello world'
                })
            }
        }
    })
</script>
</body>
</html>
View Code

 

3.动画封装
        template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
                    <slot v-if="show"></slot>
                    </transition>`,






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画封装</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <fade :show="show">
        <div>Hello world</div>
    </fade>

    <fade :show="show">
        <h1>Hello world</h1>
    </fade>
    <button @click="handleCLick">click me</button>
</div>
<script>
    Vue.component('fade',{
        props:['show'],
        template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
                    <slot v-if="show"></slot>
                    </transition>`,
        methods:{
            handleBeforeEnter:function (el) {
                    el.style.color = 'red'
            },
            handleEneter:function (el,done) {
                setTimeout(()=>{
                    el.style.color = 'green'
                    done()
                },2000)
            }
        }
    });
    var count = 0;
    var vm = new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            handleCLick:function () {
                this.show = !this.show;
            }
        }
    })
</script>
</body>
</html>



View Code








            

            
posted @ 
2019-02-24 17:21 
最美的烟火 
阅读(386) 
评论(0) 
编辑 
收藏 
举报