वेब एनिमेशन

Question

Web Animations is a new w3c spec का उपयोग करके डीओएम गुणों (स्क्रॉलटॉप) को एनिमेट करें, बस यह स्पष्ट करने के लिए कि हम किस बारे में बात कर रहे हैं। किसी भी तरह से, मैं आसानी से एक निश्चित तत्व को स्क्रॉल करना चाहता था। JQuery के Animate फ़ंक्शन का उपयोग करना यह हमेशा एक ब्रेनर था, लेकिन यह वेब एनिमेशन के साथ उतना आसान नहीं लगता है। क्या वेब एनीमेशन टाइमिंग फ़ंक्शंस का उपयोग करने और उन्हें DOM प्रॉपर्टी (scrollTop) पर लागू करने का कोई तरीका है। कारण मैं पूछ रहा हूं कि मैं अपने पूरे आवेदन में एक अलग तकनीक/लाइब्रेरी के साथ ऐसा करने के दौरान अपने इंटरपोलेशन फ़ंक्शन का उपयोग करने के लिए एक संपूर्ण (अतिरिक्त) लाइब्रेरी लोड नहीं करना चाहता हूं।

Answer 1

scrollTop को एनिमेट करने के लिए आप Custom Effects का उपयोग कर सकते हैं, उदा।

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

Answer 2

प्रलेखन की खातिर, युवान के जवाब से शुरू, कोर-एनीमेशन का उपयोग कर के लिए:

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