Skrollr只运行一次然后停止

Question

如何在Skrollr中运行一次动画，然后杀死它？

我已经试过：

• 的beforerender方法，但杀死所有的动画
• 寻找方法来设置各个Skrollr情况下，但它是一个单
• 删除或重命名对象的attributes
• null ifying the object's className
• 切换CSS类

每一次，它看起来像值缓存在Skrollr和火，无论我的努力。我在这里错过了什么？

Answer 1

我要改善这个问题：

https://github.com/Prinzhorn/skrollr/wiki/Tips

在提示选项卡下的维基，有可能是有用的一个片段：

skrollr.init({ 
    beforerender: function(data) { 
     return data.curTop > data.lastTop; 
    } 
}); 

事实上，使用此代码时，只有在您向下滚动，这将导致动画播放一次，或者换句话说，当您向上滚动时，它不会“回头”，就像CSS animation-fill-mode：forwards;

Answer 2

好吧，我终于找到了一个半解决方案。我已经完全删除节点并重新插入一个新节点。这是我的代码，所以你可以得到这个想法：

// Before this, poll window.onscroll to wait for the skrollable-after 
// class to be applied. 
if (!this.flags.learnmore && Toolbox.hasClass(this.dom.learnmoreslider, 'skrollable-after')) { 
    // Sort of a misleading name, sorry, not an exact clone 
    var clone = document.createElement("span"); 
    clone.innerHTML = this.dom.learnmoreslider.innerHTML; 

    // This was the end condition of the animation 
    // (it slid text horizontally) so it has to look the same. 
    clone.style.marginLeft = "250px"; 

    var parent = this.dom.learnmoreslider.parentNode; 
    parent.appendChild(clone); 

    // This must be removed after in order to maintain the parent reference. 
    parent.removeChild(this.dom.learnmoreslider); 

    // Raise a flag or remove the listener or something, you're done 
    this.flags.learnmore = true; 
    } 
} 

有点笨重，但伎俩。我肯定仍然对杀死动画的正确方式感兴趣。

Answer 3

像这样的东西应该工作：

skroller = skrollr.init({ 
    render: function(data) { 
    scroll = data.curTop; 

    if ((scroll >= 200) && (!element.hasClass('active'))) { 
     element.addClass('active').removeAttr('data-start data-end'); 
     skroller.refresh(); 
    } 
    } 
});