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

Skrollr run animation once only then stop

本文关键字：一次 然后 运行 动画 Skrollr      更新时间：2023-09-26

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

我试过：

  • beforerender方法，但会杀死所有动画
  • 寻找设置单个 Skrollr 实例的方法，但它是一个单例
  • 删除或重命名对象的attributes
  • null确定对象的className
  • 切换 CSS 类

每次，看起来这些值都缓存在 Skrollr 中并触发，无论我的努力如何。我在这里错过了什么？

我想改进这个问题：

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

在 wiki 的"提示"选项卡下，有一个有用的代码段：

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

实际上，使用此代码，它只会在您向下滚动时才进行动画处理，因此将导致动画将播放一次，或者换句话说，当您向上滚动时它不会"回头"，就像 CSS 动画填充模式一样：向前;

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

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

有点笨拙，但可以解决问题。 我肯定仍然对杀死动画的正确方法感兴趣。

这样的事情应该可以工作：

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();
    }
  }
});
相关文章：