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
光阴似箭催人老,日月如移越少年。
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样式就好了,大概就这么写
vue 的transition组件会对组件内的元素进行 v-show v-if来进行判断执行进入动画,离开动画,所以写好对应的动画后,鼠标移入显示,离开隐藏即可
html
css
要是想从屏幕外滑进来就换一下css样式就好了,大概就这么写