폴리머로 네온 애니메이션 페이지를 사용할 때 깜박임

Question

나는이 솔루션을 많이 찾았지만 같은 "깜박임"문제를 설명하는 게시물을 찾을 수 없었습니다.

당신은 내가 폴리머 Starterkit 같이 app-route를 사용하여 메뉴를 웹 사이트가 있지만, 네온 - 애니메이션 - 페이지와 향상된 GIF에게 here

상황
을 볼 수 있습니다. 메뉴 (시작, 내 카드, 내 대시 보드)를 사용하면 자연스럽게 전환됩니다.

문제
이동 "내 카드"와에 강화 카드가 첫 번째 카드에 (툴팁 '추가 정보') 아래로 화살표를 클릭합니다. 이제 메뉴를 다시 사용하면 애니메이션이 끝나 자마자 페이지 전환이 깜박입니다. 그것은 모든 물체가 빠르게 어딘가로 움직이고 나서 그들이 있어야하는 위치로 돌아가는 것과 같습니다. 내가
내가 그것을가 "다시 정렬"페이지의 객체 보인다, CSS를 변경하려고 시도 무엇

. 또한 이전에 JavaScript를 사용하여 다른 페이지로 라우트했지만 "href ..."를 사용하여 app-route (polymer starterkit 에서처럼)에서이 문제가 다시 사라졌습니다.

누구에게 어떤 생각이 있습니까?

Chrome, Firefox 및 IE에서 확인한 결과는 어디서나 동일합니다.

도움 주셔서 대단히 감사합니다. 친절한 답변, huebiii

Answer 1

동일한 문제 및 해결 방법으로 github에서 2 개의 추가 출처를 찾을 수 있습니다.

1. 왼쪽/오른쪽 애니메이션 슬라이드에만 영향을 미칩니다. 다른 애니메이션을 사용하면 도움이됩니다.
2. 폴리 필을로드하기 전에 Element.prototype.animate = null으로 설정하십시오.

Flicker after slide animation in neon-animated-pages in Chrome

web-animations-next-lite flicker #86