带有霓虹动画页面的聚合物入门套件

Posted 2023-02-24

【中文标题】带有霓虹动画页面的聚合物入门套件

【英文标题】：Polymer Starter Kit with neon-animated-pages

【发布时间】：2016-02-15 17:53:38

【问题描述】：

我只看到了很棒的多播 #25：https://www.youtube.com/watch?v=wMhq1o0DULM

这很好用，但我想使用与 Polymer Starter Kit 类似的东西，但在 PSK 中，他们使用带有路由的铁页（我认为这是最佳实践，不是吗？）但我太菜鸟了 :(,而且我不能将 Iron-pages 与 neon-animated-pages 结合起来:( ¿你有例子或手册来实现吗？

非常感谢....

【参考方案1】：

只需替换你的铁页：

 <iron-pages selected="[[page]]" attr-for-selected="name">
   <my-view1 name="view1"></my-view1>
   <my-view2 name="view2"></my-view2>
 </iron-pages>

使用霓虹动画页面并选择您的进入和退出动画：

<neon-animated-pages selected="[[page]]" attr-for-selected="name" fallback-selection="404" entry-animation="slide-from-bottom-animation" exit-animation="fade-out-animation">
   <my-view1 name="view1"></my-view1>
   <my-view2 name="view2"></my-view2>
</neon-animated-pages>

使用bower install --save PolymerElements/neon-animation 安装霓虹动画

包含元素：

<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-bottom-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">

你可以走了。

【参考方案2】：

现在有一个 recipe 在 Polymer Starter Kit 存储库中执行此操作。

如果您想要该集成的工作示例，可以在此处找到一个（基于 Polymer Starter Kit v1.2.3）： https://github.com/vguillou/polymer-starter-kit/tree/neon-animated-pages-basic