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

2019年8月6日 172次阅读

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

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

这很棒！

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

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

我的初步问题：
如何实现节标签的滚动过渡

<section> </section>

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

谢谢你的贡献！

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

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

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

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

点赞