vue_24 vue中的动画封装

作者: basicGeek | 来源:发表于2018-11-08 14:23 被阅读0次

vue_24 vue中的动画封装
vue中动画封装
Vue中的动画封装
Vue中的动画封装
Vue中的动画封装
6、Vue中的动画封装（Vue 中的动画特效）
Vue之transition
18.vue中的动画封装
vue的动画特效
简单谈谈vue的过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

<div id="root">
        <fade :show="show">
            <div v-if="show">miss you</div>
        </fade>
        <fade :show="show">
            <h1 v-if="show">miss you</h1>
        </fade>
        <button @click="handle">toggle</button>
    </div>


    <script>

    Vue.component('fade',{
        props:['show'],
        template:`
        <transition @before-enter="handleBeforeEnter" @enter="handleEnter">
            <slot v-if="show"></slot>
        </transition>
        `,
        methods:{
            handleBeforeEnter:function(el){
                el.style.color = 'red'
            },
            handleEnter:function(el,done){
                setTimeout(() =>{
                    el.style.color = 'green'
                    done()
                },2000)
            }
        }
    })  

    var vm = new Vue( {
        el: "#root",
        data: {
            show: false
        },
        methods: {
            handle: function() {
                this.show = !this.show
            },

        }
    })
    </script>
    
</body>
</html>

vue动画封装