erikringsmuth/app-router
View on GitHubCross-fade for core-animated-pages is not smooth
Open
#87 opened on Feb 19, 2015
help wanted
Description
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"><app-route> 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();
});
</script></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>