vue2.0過渡懸停事件 - VoidCC

Question

使用vue2.0 transition怎麼完成滑鼠移上去，從螢幕外側滑出二維碼，離開二維碼滑出螢幕的效果

Answer 1

vue 的transition組件會對組件內的元素進行 v-show v-if來進行判斷執行進入動畫，離開動畫，所以寫好對應的動畫後，滑鼠移入顯示，離開隱藏即可

Answer 2

html

<p id="app">
    <p id=ad-box @mouseenter='show =true' @mouseleave='show = false'>
        我是放广告的父盒子
        <transition name='fade'>
            <p id=ad v-show='show'>我是广告</p>
        </transition>
    </p>
</p>

css

html, body, #app {
            width: 100%;
            height: 100%;
        }

        #ad-box {
            width: 200px;
            height: 200px;
            position: fixed;
            right: 0;
            bottom: 50%;
            background: #cccccc;
        }

        #ad {
            width: 100%;
            height: 100%;
            background: gray;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }

        .fade-enter, .fade-leave-active {
            opacity: 0
        }

要是想從螢幕外滑進來就換一下css樣式就好了，大概就這麼寫