Vue中css动画封装

最新推荐文章于 2022-10-11 22:47:32 发布

就是我咯

最新推荐文章于 2022-10-11 22:47:32 发布

阅读量426

点赞数

文章标签：推荐使用

本文链接：https://blog.csdn.net/qq_38859502/article/details/82356273

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中动画的封装</title>
    <!-- <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition:opacity 3s;
        }
    </style> -->
</head>
<body>
    <script src="https://vuejs.org/js/vue.js"></script>
    <div id="app"> 
        <fade :show="show">
            <div>hello world</div>
        </fade>
        <fade :show="show">
            <h1>hello world</h1>
        </fade>
        <button @click="chang">toggle</button>
    </div>
    <script>
        // 创建全局组件
        Vue.component('fade',{
            props:['show'],
            template:`<transition @before-enter="beforeEnter" @enter="handleEnter">
                        <slot v-if="show"></slot>
                    </transition>`,
            methods:{
                beforeEnter(el){
                    el.style.color="red"
                },
                handleEnter(el,done){
                    setTimeout(()=>{
                        el.style.color="green"
                        done()
                    },3000)
                   
                }
            }
        })

        var vm=new Vue({
            el:'#app',
            data:{
                show:false,
            },
            methods: {
                chang(){
                    this.show=!this.show
                }
            }
        })
    </script>
        
</body>
</html>

就是我咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中css动画封装

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫