Vue中的动画封装

最新推荐文章于 2022-05-03 10:50:50 发布

要不要吃烤肉

最新推荐文章于 2022-05-03 10:50:50 发布

阅读量122

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108684711

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的动画封装</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 对需要动画的DOM便签直接在外层包裹封装好的组件 -->
        <myfade :show="show"> 
            <div>Vue中的动画封装</div>
        </myfade>
        <myfade :show="show"> 
            <h1>Vue中的动画封装</h1>
        </myfade>
        <button @click="handleBtnClick">切换</button>
    </div>

    <script>
        Vue.component("myfade", {
            props: ["show"],
            // <template>中<slot>里的v-show改为v-if才有效
            template: `
                <transition  @before-enter="handleBeforeEnter" @enter="handleEnter" @before-leave="handleBeforeLeave" @leave="handleLeave">
                    <slot v-if="show"></slot>
                </transition>
            `,
            methods: {
                // 动画封装，将CSS动画也转成js动画封装进组件
                handleBeforeEnter: function(el) {
                    el.style.color = "red";
                },
                handleEnter: function(el, done) {
                    setTimeout(()=>{
                        el.style.color = "black";
                        done();
                    },3000)
                },
                handleBeforeLeave: function(el) {
                    el.style.color = "blue";
                },
                handleLeave: function(el, done) {
                    setTimeout( ()=> {
                        el.style.color = "black";
                        done();
                    },3000)
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>