Question

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

我阅读了这些说明：https://medium.com/collaborne-engineering/polymer-2-0-replace-neon-animation-with-web-animations-api-e82d7bd82e6但我无法弄清楚如何在我的情况下使用它：

我有一个页面，其中包含两个自定义元素，如果路径匹配则显示：

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

catalog-list-page包含dom-repeat，用于加载指向catalog-product-page的项目列表。如何在选择项目时让catalog-product-page动画制作动画？

Answer 1

即使neon-animation已被弃用，但它仍然是使用Web动画的一个很好的例子。我建议您查看其源代码，尤其是neon-animated-pages和neon-animatable。

如何在选择项目时让catalog-product-page动画制作动画？

它有很多方法可以做。

我提出的最简单的事情之一是this。在那个plunker中它有2个组件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动画的更多示例请参阅here和W3C规范，请参阅here。我希望这有帮助。

注意：根据我使用Web动画的经验。它在支持的浏览器中运行得非常好，但其他浏览器并不是那么好（你可以在他们的回购中找到一些问题）。

使用WebAnimations API而不是霓虹灯动画

1 个答案: