Animiere DOM-Eigenschaften (scrollTop) mit Web-Animationen

Question

Web Animations is a new w3c spec, nur um klar zu sein, worüber wir reden. In jedem Fall wollte ich sanft zu einem bestimmten Element blättern. Mit der Animate Funktion von jQuery war das immer ein Kinderspiel, aber das scheint bei Web-Animationen nicht so einfach zu sein. Gibt es eine Möglichkeit, die Timing-Funktionen von Web Animation zu verwenden und sie auf eine DOM-Eigenschaft (scrollTop) anzuwenden. Der Grund, den ich stelle, ist, dass ich nicht eine ganze (zusätzliche) Bibliothek laden möchte, nur um seine Interpolationsfunktion zu verwenden, während ich es mit einer anderen Technologie/Bibliothek in der restlichen Anwendung mache.

Answer 1

Sie können Custom Effects verwenden, um scrollTop zu animieren, z.

var a = new Animation(el, function(time) { 
    el.scrollTop = el.scrollTop + time * 500; 
}, 1000); 

Answer 2

Aus Gründen der Dokumentation von Yvonne Antwort beginnend mit Core-Animation:

<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>