亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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