vue2.0 transition hover incident - Stack Overflow

Question

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

Answer 1

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

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
        }

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