如何使用聚合物的霓虹灯元素转换页面滚动

Question

我是第一次接触聚合物。我正在尝试通过聚合物霓虹灯-*元素来探索动画资源。

基于聚合物项目中的演示，我发现了如何在页面之间转换：

<neon-animated-pages id="pages" class="flex" selected="{{selected}}"  entry-animation="slide-from-left-animation" exit-animation="slide-right-animation">
   <neon-animatable>
      <h1>Consultoria</h1>
   </neon-animatable>
   <neon-animatable>
      <h1>Treinamento</h1>
   </neon-animatable>
   <neon-animatable>
      <h1>Institucional</h1>
   </neon-animatable>

​

这个很好用！

但是，我想在一个页面中探索各种形式的过渡和动画，只使用聚合物元素，类似于收件箱谷歌主页：

http://www.google.com/inbox/

我最初的问题是:如何实现sections标记的滚动转换

<section> </section>

使用聚合物霓虹灯-*元素，类似于谷歌收件箱的行为？

感谢您的贡献！

Answer 1

我认为你不能很容易地用聚合物做到这一点，因为他们有铁页面和霓虹灯动画页面来切换部分，而且它们本身都不支持一页滚动。

我正在寻找类似于谷歌收件箱的例子，最后我在iscroll.js的帮助下创建了它。

它的外观和效果也非常好，因为你在任何浏览器中都没有滚动条，iscroll使用css过渡。

https://github.com/sgoran/polymer-spa