master

分支 (1)

管理

管理

master

vuedemo
/
过渡动画.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <style>
            .diva{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="toggle" >启动</button>
            <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter"
            >
                <div class="diva" v-show="isShow"></div>
            </transition>
        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1",
                    isShow:true
                },
                methods: {
                    toggle(){
                        this.isShow = !this.isShow
                    },
                    beforeEnter(el){
                        console.log(el)
                        el.style.opacity = "0"
                    },
                    enter(el, done){
                        console.log(el)
                        el.offsetWith;
                        el.style.transition = "all 3s"
                        setTimeout(function(){
                            done()
                        },0)
                    },
                    afterEnter(el){
                        el.style.opacity = "1"
                        el.style.marginLeft = "500px"
                    }
                },
            });
        </script>
    </body>
</html>