如何使用Polymer的neon元素转换页面滚动

I am new to Polymer. I'm trying to explore the animation resources through the Polymer neon-* elements.

我是Polymer的新手。我正试图通过Polymer neon- *元素探索动画资源。

Based on demos in Polymer Project, I found how to transition between pages:

根据Polymer Project中的演示，我找到了如何在页面之间转换：

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

This works great!

这很棒！

But, I would like to explore various forms of transition and animation in a single page, only using Polymer Elements, similar to the Inbox Google homepage:

但是，我想在单个页面中探索各种形式的过渡和动画，仅使用Polymer Elements，类似于Inbox Google主页：

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

My initial question: How the scroll transitions of sections tags could be implemented

我的初步问题：如何实现部分标签的滚动转换

<section> </section>

using Polymer neon- * elements , similar to Google Inbox behavior?

使用Polymer neon- *元素，类似于Google Inbox的行为？

Thank you for any contribution!

谢谢你的贡献！

1 个解决方案

#1

I think you can't do it easily with polymer only because they have iron-pages and neon-animated-pages for sections switching and neither supports natively one page scrolling.

我认为你不能轻易地使用聚合物，因为它们有用于切换部分的铁页和霓虹动画页面，并且既不支持原生的单页滚动。

I was looking similar example as google inbox, in the end I created it with the help of iscroll.js.

我看起来像google收件箱这样的例子，最后我在iscroll.js的帮助下创建了它。

It also looks and works very good because you there are no scroll bars in any browser, iscroll uses css transition.

它看起来也非常好用，因为你在任何浏览器中都没有滚动条，iscroll使用css转换。

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

#1