vue2.0 transition hover incident - Stack Overflow
大家讲道理
大家讲道理 2017-05-19 10:30:59
0
2
615

How to use vue2.0 transition to achieve the effect of moving the mouse up, sliding out the QR code from the outside of the screen, and leaving the QR code and sliding out of the screen

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(2)
巴扎黑

Vue's transition component will perform v-show v-if on the elements within the component to determine whether to enter the animation or leave the animation, so after writing the corresponding animation, move the mouse to display and leave to hide

阿神

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
        }

If you want to slide in from outside the screen, just change the css style, probably just write it like this

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!