javascript - div 水平进入视口(viewport)时的动画

Question

我正在创建一个无限水平进给，我想在元素水平进入视口(viewport)时为元素设置动画。我正在为此尝试使用 waypoint.js。

JS FIDDLE

<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

将 .show 添加到 div，这会将 div 的不透明度从 0 更改为 1。

$(function() {
$(".item").each(function(){
   $(this).waypoint(function() {
     $(this).addClass('show');
     }, {
       offset: '100%',
       horizontal: true
     });  
 });      
});

CSS

.item
{
width:500px;
height:250px;
background:red;
color:#fff;
display:inline-block;
opacity:.2;
}
.item.show
{
opacity:1;
}

但现在当元素水平进入视口(viewport)时，它们的不透明度不会从 0 更改为 1。知道为什么吗？抱歉，我对 javascript 和航路点真的很陌生。

Answer 1

100%宽度不正确；如果将其更改为 500px(单个项目的指定宽度)，它将起作用。虽然这不是最佳选择(无论何时更改任何内容，都需要更新 JS 和 CSS):更好的方法可能是通过 JS 获取项目的宽度，并将该值用作偏移量。

传递给 offset 的百分比值是视口(viewport)的百分比，我假设这不是您在这里想要的，而偏移量应该是每个项目的宽度。此时，任何项目甚至部分位于视口(viewport)内都是不透明的，因此您永远看不到任何变化。

参见 http://imakewebthings.com/waypoints/api/offset-option/