使用带有 Polymer 的霓虹灯动画页面时闪烁
Flickering when using neon-animated-pages with Polymer
我搜索了很多这个解决方案,但找不到任何 post 描述相同的 "flickering" 问题。
您可以看到一个 GIF here
情况
我有一个带有菜单的网站,在 Polymer Starterkit 中使用 app-route
,但使用霓虹灯动画页面进行了增强。
如果您使用菜单(“开始”、“我的卡片”、“我的仪表板”),则过渡平稳。
问题
转到 "My Card" 并单击第一张卡片上的向下增强卡片箭头(工具提示 "more info")。
现在再次使用菜单,页面转换现在开始闪烁,动画一结束。就像所有的物体都在快速移动到某个地方,然后又回到它们应该在的位置。
我试过的
我试图更改 CSS,因为它似乎 "re-align" 页面上的对象。
我之前也有这个问题,当我使用 javascript 路由到另一个页面时,但是使用 "a href..." 作为应用程序路由(如在 polymer starterkit 中),这个问题又消失了。
有人知道这是什么吗?
我查了下Chrome,火狐和IE,好像到处都一样。
非常感谢您的帮助!
亲切的问候,
笔笔
在 github 上找到了两个具有相同问题和解决方案的来源。
- 显然只有幻灯片 left/right 动画受到影响。使用不同的动画应该会有帮助。
- 在加载 polyfill 之前设置
Element.prototype.animate = null
。
Flicker after slide animation in neon-animated-pages in Chrome
我搜索了很多这个解决方案,但找不到任何 post 描述相同的 "flickering" 问题。
您可以看到一个 GIF here
情况
我有一个带有菜单的网站,在 Polymer Starterkit 中使用 app-route
,但使用霓虹灯动画页面进行了增强。
如果您使用菜单(“开始”、“我的卡片”、“我的仪表板”),则过渡平稳。
问题
转到 "My Card" 并单击第一张卡片上的向下增强卡片箭头(工具提示 "more info")。
现在再次使用菜单,页面转换现在开始闪烁,动画一结束。就像所有的物体都在快速移动到某个地方,然后又回到它们应该在的位置。
我试过的
我试图更改 CSS,因为它似乎 "re-align" 页面上的对象。
我之前也有这个问题,当我使用 javascript 路由到另一个页面时,但是使用 "a href..." 作为应用程序路由(如在 polymer starterkit 中),这个问题又消失了。
有人知道这是什么吗?
我查了下Chrome,火狐和IE,好像到处都一样。
非常感谢您的帮助! 亲切的问候, 笔笔
在 github 上找到了两个具有相同问题和解决方案的来源。
- 显然只有幻灯片 left/right 动画受到影响。使用不同的动画应该会有帮助。
- 在加载 polyfill 之前设置
Element.prototype.animate = null
。
Flicker after slide animation in neon-animated-pages in Chrome