Vue学习笔记5.7 封装过渡动画

た入场券 2022-03-20 13:58 252阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Vue过渡动画的封装</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="vue.js"></script>
        
        
    </head>
    
    <body>
        <div id="app">
            
            <child :show="show">
                <div>Hello World</div>
            </child>
            <child :show="show">
                <h2>ABC</h2>
            </child>
            <button @click="handleClick">添加元素</button>
        </div>
    </body>
    <script>
        // 1.将整个<transition>中的元素放到自组建的模板中。然后通过show传递判断条件
        // 然后再模板中添加插槽<slot>
        Vue.component('child', {
            props: ['show'],
        // 4. 通过之前说到的 @before-enter @enter @after-enter @before-leave @leave @after-leave来执行js动画
        // 将这些也包裹在自组建的模板中就可以了
            template: `<transition @before-enter="beforeEnter"
                                    @enter = "enter">
                            <slot v-if="show"></slot>
                    </transition>`,
            methods: {
                beforeEnter: function(el) {
                    el.style.color = 'red'
                },
                enter: function(el, done) {
                    setTimeout(() => {
                        el.style.color = 'green'
                        done()
                    }, 2000)
                }
            }
        })
    
        var vm = new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = this.show ? false : true
                }
            }
        })
    </script>
    
    </html>

其实说白了就是把<transition>也放到子组件的模板中 然后加入<slot>插槽   然后样式封装就是把CSS样式改成JS事件对应的函数也封装到子组件中就可以了。