Animare le proprietà DOM (scrollTop) utilizzando le animazioni Web

Question

Web Animations is a new w3c spec, solo per essere chiari di cosa stiamo parlando. Ad ogni modo, volevo scorrere verso un determinato elemento senza problemi. Usando la funzione Animate di jQuery questo è sempre stato un gioco da ragazzi, ma questo non sembra essere così semplice con le animazioni Web. Esiste un modo per utilizzare le funzioni di sincronizzazione di Web Animation e applicarle a una proprietà DOM (scrollTop). Il motivo per cui sto chiedendo è che non voglio caricare un'intera libreria (extra) solo per usare la sua funzione di interpolazione mentre lo faccio con una tecnologia/libreria diversa nel resto della mia applicazione.

Answer 1

È possibile utilizzare Custom Effects per animare scrollTop, ad es.

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

Answer 2

Per motivi di documentazione, a partire dalla risposta di Yvonne, utilizzando 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>