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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容