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(); 
    } 
    } 
});