2个回答
已采纳
首先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)
}
