네온 애니메이션 대신 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> 

:

내가 경로와 일치하는 경우 표시되는 두 개의 사용자 지정 요소가있는 페이지가

catalog-list-page에는 catalog-product-page을 가리키는 항목 목록을로드하는 dom-repeat이 들어 있습니다. 항목을 선택하면 catalog-product-page에 애니메이션이 적용되게하려면 어떻게해야합니까?

Answer 1

비록 neon-animation은 이미 사용되지 않지만 웹 애니메이션을 사용하는 좋은 예입니다. 소스 코드를 특히 neon-animated-pages 및 neon-animatable으로 보는 것이 좋습니다.

항목을 선택하면 catalog-product-page에 애니메이션을 적용하려면 어떻게해야합니까?

다양한 방법이 있습니다.

가장 간단한 것 중 하나는 this입니다. 이 플 런커에는 두 개의 구성 요소가 있습니다 (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' 
}) 

입니다. 이탈 페이지 (선택되지 않은 상태로 전환)는 표시가 없기 때문에 아무 것도하지 않습니다. 다른 페이지에 대해서만 반환됩니다.

웹 애니메이션을 사용하는 다른 예제는 here과 W3C 사양은 here을 참조하십시오. 나는이 도움을 바랍니다.

참고 : 웹 애니메이션 사용 경험. 지원되는 브라우저에서 잘 작동하지만 다른 브라우저에서는 잘 작동하지 않는 브라우저입니다 (Repo에서 문제가 있음).