skrollr 关键帧未正确执行

Question

和 skrollr 玩得开心。据我了解，一旦您传递了您设置为数据属性的任何像素，无论您在其中拥有什么 css 代码，都应该运行。我在这里错过了什么？我只是想 show/hide 一些段落，因为它们到达了开始和结束像素，但它们出现在标记之前并且之后不会自行消失。例如，为什么 p2 出现在第 50 帧之前？为什么它不消失？

http://codepen.io/anon/pen/rLVGjw

var s = skrollr.init({
  forceHeight: true,
  render: function(data){
    document.querySelector(".whereami").innerHTML = data.curTop;
  }
});

    body {
      background: #000;
    }
    p {
      position: absolute;
      top: 200px;
      left: 200px;
    }

  <script src="
               https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<div class="whereami" style="position: fixed; top: 0; left: 0; color: #fff">0</div>

  <main>
    <p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
    <p data-0="opacity: 0" data-50="opacity: 1" data-100="opacity: 0">p2</p>    
    <p data-0="opacity: 0" data-150="opacity: 1" data-200="opacity: 0">p3</p>    
    <p data-0="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p4</p>    
    <p data-0="opacity: 0" data-250="opacity: 1" data-300="opacity: 0">p5</p>

    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />

Answer 1

p2 显示在 50px 滚动之前，因为它在 "data-0" 上的不透明度为 0，然后在 "data-50" 上的不透明度为 1，这意味着在该 50px 滚动中不透明度将从 0 变为 1。这意味着它将与 p1 重叠，p1 的不透明度在相同的 50 px 中从 1 变为 0。

你需要有这样的东西：

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>

想法是不要让同一滚动值中的段落重叠。您在 50px 处完成 0 到 50px 之间的过渡，然后开始将新段落从 50px 过渡到您认为需要多少，其余元素依此类推。

我在你的 codepen 中尝试了以下代码的前 3 段，动画效果如你所愿：

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>    
<p data-150="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p3</p>

skrollr 关键帧未正确执行

skrollr keyframes not executing properly

skrollr