ネオンアニメーションの代わりにWebAnimations APIを使用する

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> 

：

私はルートと一致した場合に表示されている2つのカスタム要素を持つページを持っています

catalog-list-pageには、catalog-product-pageを指す項目のリストをロードするdom-repeatが含まれています。 アイテムを選択したときにアニメーション化するには、どうすればcatalog-product-pageを作成できますか？

Answer 1

neon-animationはすでに廃止されていますが、それでもWebアニメーションを使用する良い例です。そのソースコードは特にneon-animated-pagesとneon-animatableです。

catalog-product-pageは、アイテムが選択されたときにアニメーション表示されるようにするにはどうすればよいですか？

これにはさまざまな方法があります。

私が出てくる最も簡単なことの一つは、thisです。そのプランナーには、2つのコンポーネントがありますmy-appとmy-pageです。最初のバージョン（サイドバーのバージョン）に切り替えるだけで、表示ブロックをnoneに切り替えるだけです。そして、あなたは簡単なトランジションが表示されます番目のバージョンに切り替えて、追加されたコードは、それが示すコードとしてアニメーションを再生します（選択するスイッチ）このエントリページの意味

if (selected === this.selected) return 

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

です。終了ページ（選択されていない状態に切り替える）では、その表示がnoneなので何もしません。他のページについては、ただ返します。

Webアニメーションを使用する他の例は、hereおよびW3C仕様のhereを参照してください。私はこの助けを願っている。

注：私のWebアニメーションの使用経験では、サポートされているブラウザではうまく動作しますが、他のブラウザではうまく動作しません（レポで問題が見つかることがあります）。