Skrollr只运行一次动画然后停止

时间:2014-04-03 22:57:43

标签: javascript skrollr

如何在Skrollr中运行一次动画,然后将其杀死?

我试过了:

  • beforerender方法,但会杀死所有动画
  • 寻找设置单个Skrollr实例的方法,但它是单身
  • 删除或重命名对象attributes
  • null ifying the object' s className
  • 切换CSS类

每次,无论我的努力如何,看起来这些值都会在Skrollr中缓存并触发。我在这里缺少什么?

3 个答案:

答案 0 :(得分:3)

我想改进这个问题:

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

在“提示”标签下的Wiki中,有一个有用的代码段:

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

事实上,使用此代码,只有向下滚动才会生成动画,因此会导致动画播放一次,换句话说,当您向上滚动时,它不会“回头”比如CSS animation-fill-mode:forwards;

答案 1 :(得分:0)

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

// 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;
    } 
}

有点笨重但是诀窍。我仍然对杀死动画的正确方法感兴趣。

答案 2 :(得分:0)

这样的事情应该有效:

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