search

erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
610 stars 83 forks source link

Cross-fade for core-animated-pages is not smooth #87

Open pjjjv opened 9 years ago

pjjjv commented 9 years ago

When I add the core-animated-pages attribute to app-router in the gh-pages demo website, along with the cross-fade transition, the transitions are abrupt. The api page will fade in, but the home page will not have faded out, instead will have just disappeared. Also a page can suddenly appear, halfway through a transition. It becomes even more obvious when the durations are increased.

I figure this may be caused by the core-animated-pages element itself, which is still experimental. However, for the simple cases I have used it outside app-router, I have not seen these problems.

I basically added the following to gh-pages to reproduce this. Switch between Home and API to see.

diff --git a/index.html b/index.html
index e913d8e..ed56370 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,8 @@
     <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
     <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
     <link rel="import" href="bower_components/core-item/core-item.html">
+    <link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
+    <link rel="import" href="bower_components/core-animated-pages/transitions/cross-fade.html">
     <link rel="import" href="bower_components/core-icons/social-icons.html">
     <link rel="import" href="bower_components/core-icons/hardware-icons.html">
     <link rel="import" href="bower_components/core-style/core-style.html">
@@ -36,7 +38,12 @@
     <link rel="import" href="elements/code-snippet.html">
   </head>
   <body unresolved>
-    <app-router mode="hash">
+    <script>
+      CoreStyle.g.transitions.duration = '10s';
+      //CoreStyle.g.transitions.scaleDelay = '10s';
+      //CoreStyle.g.transitions.xfadeDuration = '10s';
+    </script>
+    <app-router mode="hash" core-animated-pages transitions="cross-fade">
       <app-route path="/" import="pages/home-page.html" template></app-route>
       <app-route path="/api" import="pages/api-page.html"></app-route>
       <app-route path="/databinding/:pathArg1" import="pages/data-binding-page.html"></app-route>
diff --git a/pages/api-page.html b/pages/api-page.html
index cbf6a65..70ec08a 100644
--- a/pages/api-page.html
+++ b/pages/api-page.html
@@ -8,6 +8,7 @@
     <scaffold-layout selected="api">
       <div class="title">API</div>

+<div cross-fade>
       <h2 id="app-route-options">&lt;app-route&gt; options <a href="#/api#app-route-options">#</a></h2>

       <h4 id="path" class="top-spacing">path URL matching <a href="#/api#path">#</a></h4>
@@ -115,7 +116,7 @@ document.querySelector('app-router').go('/home', {replace: true});</code-block>
     document.querySelector('app-router').init();
   });
 &lt;/script&gt;</code-block>
-
+</div>
     </scaffold-layout>
   </template>
 </polymer-element>
diff --git a/pages/home-page.html b/pages/home-page.html
index 2c4dffb..26eb49e 100644
--- a/pages/home-page.html
+++ b/pages/home-page.html
@@ -9,7 +9,7 @@

     <div class="title">Home</div>

-
+<div cross-fade>
     <h2>Router for Web Components</h2>

     <p>Works with <a href="http://www.polymer-project.org/">Polymer</a>, <a href="http://www.x-tags.org/">X-Tag</a>, and natively.</p>
@@ -108,6 +108,6 @@ document.querySelector('app-router').go('/home', {replace: true});</code-block>
     <p>Check the <a href="https://github.com/erikringsmuth/app-router/blob/master/changelog.md">change log</a> for breaking changes in major versions.</p>

     <p>Compare <code-snippet>app-router</code-snippet>, <code-snippet>flatiron-director</code-snippet>, and plain old HTML files <a href="https://github.com/erikringsmuth/polymer-rou
-
+</div>
   </scaffold-layout>
 </template>
erikringsmuth commented 9 years ago

I've seen a lot of performance issues with the core-animated-pages feature. I've spent a long time debugging the router, core-animated-pages, and Polymer trying to figure out what's going on and it's baffled me so far. Certain layouts animations work fine and some have laggy, jank transitions. I'll keep the issue open although I don't expect I'll make much progress myself. If anyone has a lot of experience with core-animated-pages, jump in and let us know if you find anything.

pjjjv commented 9 years ago

Agreed