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)
                        }
                    }
                })
            }
        }
    }
}

結尾

這是本身想的一個方法，若是各位有什麼更優雅的方法去實現的話，歡迎告知，先謝謝啦！