1
已采纳
首先v-if来不渲染这个组件,监听滚动,滚动具体位置后,再通过v-if渲染出来。至于组件初次渲染动画可以看官方文档
<transition enter-active-class="animated bounceInRight" appear>
<div>4545456</div>
<transition />
appear 是初次渲染, 我用的是 animate.css, 你也可以自己写
监听滚动,获取这个组件距离页面顶部的高度,如果这个高度小于页面的高度,就做你要做的内容
data () {
return {
}
},
methods: {
scrollFuc () {
// 获取这个组件距离页面顶部的高度,如果这个高度小于页面的高度。。。。。
// 获取距离顶部高度this.$refs.xxxx.getBoundingClientRect().top,
// 页面的高度: window.innerHeight,
// 还有一个要注意的地方,就该组件还没渲染,找不到怎么办,用一个div包着它,
// 找这个div不就行了,但是这个div最小高度是1,不能没有高度,原因,是浏览器兼容问题,
}
},
ready () {
// 监听滚动
window.addEventListener('scroll', this.scrollFuc)
}