Make splash animations abort on scroll.

sky/framework/material-element.sky

Index: sky/framework/material-element.sky
diff --git a/sky/framework/material-element.sky b/sky/framework/material-element.sky
index 046019219b7e40d797713cc03de6734fe4415ae6..94d943519325c837bff103ec9ac2d1c4f1ea3fea 100644
--- a/sky/framework/material-element.sky
+++ b/sky/framework/material-element.sky
@@ -11,20 +11,52 @@ import "dart:sky";
 HTMLStyleElement _kStyleElement;
 
 class MaterialElement extends SkyElement {
+  Set<SkyInkSplash> _activeSplashes = new Set();
+  bool _didAddTransformHack = false;
+
   MaterialElement() {
     addEventListener('pointerdown', _handlePointerDown);
+    addEventListener('gesturescrollstart', _handleScrollStart);
   }
 
-  void _handlePointerDown(PointerEvent event) {
+  void addTransformHack() {
+    if (_didAddTransformHack)
+      return;
+    if (style['transform'] != null)
+      return;
+    _didAddTransformHack = true;
     // We set the transform here to become a container for absolutely positioned
     // elements. We should either have a better way of becoming such a container
     // or we should make every RenderBlock be such a container.
     style['transform'] = 'translateX(0)';
+  }
+
+  void removeTransformHack() {
+    if (!_didAddTransformHack)
+      return;
+    style.removeProperty('transform');
+    _didAddTransformHack = false;
+  }
 
+  void _handlePointerDown(PointerEvent event) {
+    addTransformHack();
     ClientRect rect = getBoundingClientRect();
     SkyInkSplash splash = new SkyInkSplash();
     shadowRoot.prependChild(splash);
-    splash.start(event.x, event.y, rect);
+    splash.start(event.x, event.y, rect).then(_handleSplashComplete);
+    _activeSplashes.add(splash);
+  }
+
+  void _handleSplashComplete(SkyInkSplash splash) {
+    _activeSplashes.remove(splash);
+    if (_activeSplashes.isEmpty)
+      removeTransformHack();
+  }
+
+  void _handleScrollStart(GestureEvent event) {
+    for (SkyInkSplash splash in _activeSplashes) {

[abarth-chromium, 2015/02/25 02:10:22]

It occurs to me that you don't need _activeSplashes.  You can just write:

for (SkyInkSplash splash in shadowRoot.querySelector('sky-ink-splash')) {
  ...
}

[abarth-chromium, 2015/02/25 02:10:22]

It occurs to me that you don't need _activeSplashes.  You can just write:

for (SkyInkSplash splash in shadowRoot.querySelector('sky-ink-splash')) {
  ...
}

+      splash.cancel();
+    }
   }
 }
 </script>