4

Skrollr でアニメーションを一度実行してから、それを強制終了するにはどうすればよいですか?

私はもう試した：

  • メソッドですが、beforerenderすべてのアニメーションを強制終了します
  • 個々の Skrollr インスタンスを設定する方法を探していますが、それはシングルトンです
  • オブジェクトの削除または名前変更attributes
  • nullオブジェクトのclassName
  • CSS クラスの切り替え

毎回、私の努力に関係なく、値が Skrollr 内にキャッシュされ、発火しているように見えます。ここで何が欠けていますか？

4

3 に答える 3

3

この質問を改善したい：

https://github.com/Prinzhorn/skrollr/wiki/ヒント

ウィキの [ヒント] タブに、役立つスニペットがあります。

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

実際、このコードでは、下にスクロールした場合にのみアニメーションが表示されるため、アニメーションが 1 回再生されることになります。つまり、上にスクロールしても「元に戻る」ことはなく、CSS のように動作します。アニメーション塗りつぶしモード: 転送;

于 2014-12-09T11:22:25.673 に答える
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();
    }
  }
});
于 2014-04-06T16:59:16.050 に答える
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;
    } 
}

少し不格好ですが、うまくいきます。私は間違いなく、アニメーションを殺す正しい方法にまだ興味があります.

于 2014-04-04T18:17:56.797 に答える