vue中動畫封裝

<!DOCTYPE html>
<html>
<head>
    <title>vue中動畫封裝</title>
    <script src="./vue.js"></script>
    <!-- <style>
        /*// 顯示動畫過度*/
        .v-enter {
            opacity: 0;
        }
        .v-enter-active {
            transition: opacity 3s;
        }
        /*// 隱藏動畫過度*/
        .v-leave-to {
            opacity: 0;
        }
        .v-leave-active {
            transition: opacity 3s;
        }
    </style> -->
</head>
<body>
<div id='app'>
    <fade :show="show">
        <div>hello world</div>
    </fade>

    <button @click='handleClick'>切換</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 vm1 =  new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            }
        }
    
        
    })
    
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容