Polymer 使用WebAnimationsAPI代替霓虹灯动画

我正在尝试将web动画添加到我的应用程序中。 我想避免使用霓虹灯动画，因为它现在已被弃用

我阅读了以下说明：但我不知道如何在我的案例中使用它：

我有一个包含两个自定义元素的页面，如果路线匹配，则会显示这两个自定义元素：

<app-route route="{{route}}" pattern="/list" active="{{listActive}}"></app-route>
<app-route route="{{route}}" pattern="/product/:id" active="{{productsActive}}" data="{{productsData}}"></app-route>

<catalog-product-page hidden$={{!productsActive}}></catalog-product-page>
<catalog-list-page id="productPage" hidden$={{!listActive}} item-route="{{route.prefix}}/product"></catalog-list-page>

目录列表页面

包含一个

dom repeat

，它加载指向

目录产品页面的项目列表

。

---

当选择某个项目时，如何制作

目录产品页

以获得动画效果？

即使

霓虹灯动画

已经被弃用，但它仍然是使用Web动画的一个很好的示例。我建议您查看其源代码，尤其是

neon动画页面

和

neon动画页面

当选择某个项目时，如何使目录产品页成为动画

有很多方法可以做

我想到的最简单的事情之一是。在该plunker中，它有两个组件，分别是

my app

和

my page

。切换到第一个版本（侧边栏上的版本）只是简单地将显示块切换到无，以此类推。然后切换到第二个版本，您将看到简单的转换，添加的代码是

if (selected === this.selected) return

this.animate({
  opacity: [0, 1],
  transform: ['translateY(16px)', 'translateY(0)'] 
}, {
  duration: 250,
  easing: 'ease-in-out'
})

这意味着对于进入页面（切换到选中），它将播放如代码所示的动画。对于退出页面（切换到未选择），它将不执行任何操作，因为它的显示为“无”。对于其他页面，请返回

更多使用Web动画的示例请参见和W3C规范请参见。我希望这有帮助

---

注意：根据我使用网络动画的经验。它在受支持的浏览器中运行得很好，但在其他浏览器中效果不太好（您可以在他们的回购协议中找到一些问题）。

谢谢您的回答。我设法在页面的第一次显示中获得动画（当我刷新浏览器时），但是，当我在两个页面之间切换时（从目录列表页面切换到产品详细信息页面，反之亦然），动画不再加载。我必须进一步挖掘我的元素生命周期。我会尽快更新我的帖子。