javascript - Web アニメーションを使用して DOM プロパティ (scrollTop) をアニメーション化する

Question

Web Animations は w3c の新しい仕様です。これは、私たちが話していることを明確にするためです。いずれにせよ、特定の要素までスムーズにスクロールしたかったのです。jQuery のAnimate機能を使用すると、これは常に簡単に実行できますが、Web アニメーションではそれほど単純ではないようです。Web アニメーションのタイミング関数を使用して DOM プロパティに適用する方法はありますか ( scrollTop)。私が尋ねている理由は、アプリケーションの残りの部分で別のテクノロジ/ライブラリを使用しながら、補間関数を使用するためだけに (余分な) ライブラリ全体をロードしたくないからです。

Answer 1

ドキュメンテーションのために、コアアニメーションを使用して、Yvonne's answer から始めます。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-animation/core-animation.html">

<polymer-element name="animated-scroll">
  <template>

    <style>
      #scroller {
        height: 300px;
        overflow-y: scroll;
      }
    </style>
    <button on-tap="{{animate}}">Scroll it</button>
    <div id="scroller">
      <content></content>
    </div>
    <core-animation id="animation" duration="400" easing="ease-in-out"></core-animation>

  </template>
  <script>
    (function () {

      Polymer({
        animate: function (e) {
          var start = this.$.scroller.scrollTop;
          var end = 500; // px
          var delta = end - start;
          this.$.animation.target = this.$.scroller;
          this.$.animation.customEffect = function (timeFraction, target, animation) {
            target.scrollTop = start + delta * timeFraction;
          };
          this.$.animation.play();
        }
      });

    })();
  </script>
</polymer-element>