使用Web動畫動畫DOM屬性（scrollTop）

Web Animations is a new w3c spec，只是爲了清楚我們在說什麼。無論哪種方式，我都想順利滾動到某個元素。使用jQuery的Animate函數，這總是一件容易的事情，但這對Web Animations來說似乎並不那麼簡單。有什麼方法可以使用Web動畫定時功能並將它們應用到DOM屬性（scrollTop）。我要問的原因是我不想加載整個（額外）庫，只是爲了使用它的插值函數，而在我的應用程序的其餘部分使用不同的技術/庫來完成它。使用Web動畫動畫DOM屬性（scrollTop）

來源

2014-10-10 David Mulder

追求同樣的問題。看起來WA只是動畫CSS屬性，scrollTop不是一個。 – clyfe 2014-11-06 16:18:45

@clyfe好，事實證明我並沒有完全瘋狂：P無論哪種方式，我從來沒有實現過它，但我一直在考慮在一個不可見的元素上隨機生成一個廉價的css屬性，並使用它來移動' scrollTop'。不是很漂亮，但比加載整個額外的庫更好。 – 2014-11-06 16:21:30

您可以使用Custom Effects動畫scrollTop，例如，

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

來源

2014-11-10 18:49:38

今晚晚些時候仍然需要嘗試一下，但看起來很完美：O並感謝您在Polymer：D上的驚人工作（歡迎來到StackExchange？） – 2014-11-10 18:55:01

下面是一個適用於JSFiddle的btw，適用於每個遇到此問題的人：http ：//jsfiddle.net/4hd3hjrx/1/和http://jsfiddle.net/4hd3hjrx/ – 2014-11-13 16:52:42

「動畫」現在在W3C規範中稱爲「KeyframeEffect」 – 2015-04-07 12:48:49

有關文檔的緣故，從伊馮娜的回答開始，使用核心動畫：

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

來源

2014-11-10 20:32:54 clyfe

您有使用Polymer 1.0的版本嗎？核心動畫已被棄用，新的霓虹動畫支持是相當難以理解的。 – 2016-02-22 22:35:12

使用Web動畫動畫DOM屬性（scrollTop）

回答

相關問題