[英]How to display and transition when scroll position reaches element position in the screen?
假设这是我的模板:
<template>
<div id="Test">
<transition name="fade">
<div class="row" id="RowOne">
<p>Lorem ipsum dolor odit qui sit?</p>
</div>
</transition>
<transition name="fade">
<div class="row" id="RowTwo">
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</transition>
<transition name="fade">
<div class="row" id="RowThree">
<p>Lorem ipsum dolor sit amet, tenetur!</p>
</div>
</transition>
</div>
</template>
我想分别在视口中显示RowOne, RowTwo and RowThree
时显示和动画。 与Laracasts网站一样 ,当滚动位置到达元素偏移时,元素会显示并生成动画。 是否可以使用Vue.js和javascript?
以下是如何使用directive
执行此操作。
Vue.directive('vpshow', {
inViewport (el) {
var rect = el.getBoundingClientRect()
return !(rect.bottom < 0 || rect.right < 0 ||
rect.left > window.innerWidth ||
rect.top > window.innerHeight)
},
bind(el, binding) {
el.classList.add('before-enter')
el.$onScroll = function() {
if (binding.def.inViewport(el)) {
el.classList.add('enter')
el.classList.remove('before-enter')
binding.def.unbind(el, binding)
}
}
document.addEventListener('scroll', el.$onScroll)
},
inserted(el, binding) {
el.$onScroll()
},
unbind(el, binding) {
document.removeEventListener('scroll', el.$onScroll)
delete el.$onScroll
}
})
当您在视口中可见时,您需要将v-vpshow
指令添加到要设置动画的元素。
例如:
<div class="row" id="RowOne" v-vpshow>...</div>
该指令使用两个类。
1) before-enter
:它默认隐藏元素,并在指令绑定到元素时自动添加。
2) enter
:此元素应包含元素变为可见时要应用的过渡。
一旦元素在视口中变得可见(触发动画之后), v-vpshow
将自动解除绑定,从而删除在bind
设置的任何数据和事件侦听器。
这是一个有效的例子。
Vue.directive('vpshow', { inViewport (el) { var rect = el.getBoundingClientRect() return !(rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight) }, bind(el, binding) { el.classList.add('before-enter') el.$onScroll = function() { if (binding.def.inViewport(el)) { el.classList.add('enter') el.classList.remove('before-enter') binding.def.unbind(el, binding) } } document.addEventListener('scroll', el.$onScroll) }, inserted(el, binding) { el.$onScroll() }, unbind(el, binding) { document.removeEventListener('scroll', el.$onScroll) delete el.$onScroll } }) new Vue({ el: '#app', })
/* v-vpshow classes */ .before-enter { opacity: 0; } .enter { transition: opacity 2s ease; } /* ---------------- */ .row { display: flex; min-height: 500px; justify-content: center; font-size: 20px; font-family: tahoma; } #RowOne { background-color: yellow; } #RowTwo { background-color: #5D576B; } #RowThree { background-color: #F7567C; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <div id="Test"> <div class="row" id="RowOne" v-vpshow> <p>Lorem ipsum dolor sit amet, consectetur.</p> </div> <div class="row" id="RowTwo" v-vpshow> <p>Lorem ipsum dolor sit amet, consectetur.</p> </div> <div class="row" id="RowThree" v-vpshow> <p>Lorem ipsum dolor sit amet, tenetur!</p> </div> </div> </div>
是的它应该是。 当您检测到用户已滚动一定距离时,您应该只需将display
属性从none
为可见的。
这是另一个问题,答案将帮助您实现: 在800px之后在scrollDown上显示div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.