vue向下滚动后动态显示页面

前言

最近一直在鼓捣怎么给自己的个人博客（Vue项目）添加一个功能---向下滚动的时候，用一些动画展示页面，最终自己瞎折腾用Vue的自定义指令找出了看起来比较优雅的方法，不多说了，上代码！

---

代码

// 'animated bounceIn' 为animated.css里的
<div class="newBlog" v-scroll-show>
    <p class="headline animated bounceIn">最近更新</p>
    <div class="posts animated fadeIn">
        <p>文章</p>
    </div>
</div>

.newBlog {
    min-height: 500px;
}
.headline, .posts {
    display: none;
}

export default {
    directives: {
        scrollShow: {
            bind: (el) => {
                window.addEventListener('scroll', () => {
                    if (document.body.scrollTop + 400 > el.offsetTop) {
                        for (let i = 0; i < el.children.length; i++) {
                            setTimeout(() => {
                                el.children[i].style.display = 'block'
                            }, 1000 * i)
                        }
                    }
                })
            }
        }
    }
}

结尾

这是自己想的一个方法，如果各位有什么更优雅的方法去实现的话，欢迎告知，先谢谢啦！