国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

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