在<li>到达视口时使其可见并淡入

Question

我有一个无序列表，我想让它在以下意义上工作：不在视口中的 li 将被隐藏(display：none(，当它们到达视口时，我希望它们变得可见并淡入。我想我必须使用滚动偏移量，但我无法弄清楚如何为每个 li 制作它。

<div class="my_list">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</div>

.my_list ul li{
    height:550px; /*example height*/
}

Answer 1

http://xtianmiller.com/notes/animating-elements-when-they-appear-in-viewport/

这应该可以帮助您理解。