您可以通过以下方法来做到这一点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>