Skrollr：如何根据滚动方向对关键帧进行不同的动画处理？

Question

我使用skrollr进行基于滚动的动画。我根据用户向上滚动和向下滚动，在某个关键帧上显示动画时遇到困难，但其他一切工作正常。这里是相关代码（最终部分，数据发出事件，是问题的关键）：

<div class="introTransition" data-0-start="width:30%; left:100%;" 
data-125="width:30%; left:60%;" data-250="width:30%; left:20%; opacity:1; 
display:block;" data-375="width:30%; left:-20%; opacity:1; display:block;" 
data-500="width:30%; opacity:0; display:none;" data-emit-events>
</div>

和脚本调用：

    <script type="text/javascript">
    var $trans = $('.introTransition');
    skrollr.init({forceHeight:false, smoothScrolling:true,
    keyframe: function($trans, data125, up) { //element, name, direction
        //name will be one of data500, dataTopBottom, data_offsetCenter
        console.log('yesssss');
        $('.introTransition').css({'height':'50%'});
    }
    });
    </script>

我不知道为什么这不起作用。我只是在阅读文档错了吗？

感谢阅读。

编辑：这是一个link到一个JSbin来证明我的问题。

答案：请参阅Prinzhorn的JSbin here以获得有效的解决方案。我已经大大改进了关键帧语法。

Answer 1

<script type="text/javascript">
// first get the element that you want to listen to its keyframe event
var $trans = $('.introTransition');

skrollr.init({forceHeight:false, smoothScrolling:true,
keyframe: function(element, name, direction) { //element, name, direction
    //name will be one of data500, dataTopBottom, data_offsetCenter
    // see the first criteria, we check if element match the element we selected above
    if(element == $trans && name == "data125" && direction == "up")
    {
        console.log('yesssss');
        $('.introTransition').css({'height':'50%'});
    }
}
});
</script>