Javascript – Vue2.0-Übergangs-Hover-Ereignis
大家讲道理
大家讲道理 2017-05-19 10:30:59
0
2
625

So verwenden Sie den vue2.0-Übergang, um den Effekt zu erzielen, dass Sie die Maus nach oben bewegen, den QR-Code von der Außenseite des Bildschirms herausschieben und den QR-Code belassen und aus dem Bildschirm herausgleiten lassen

大家讲道理
大家讲道理

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

Antworte allen(2)
巴扎黑

vue 的transition组件会对组件内的元素进行 v-show v-if来进行判断执行进入动画,离开动画,所以写好对应的动画后,鼠标移入显示,离开隐藏即可

阿神

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样式就好了,大概就这么写

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage