Animated transitions between pages
Home Page: https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages
See the component page for more information.
Morris.js chart doesn't display properly within Polymer core-animated-pages > section > core-animated-pages > section > card > div.
It works fine if I resize the window, the chart just displays weird when it's first injected into the page. I'm guessing it's not grabbing the right div dimensions.
So I've been trying to use core-animated-pages-transition-prepare. I've attempted the following:
<core-animated-pages id="form1" on-core-animated-pages-transition-prepare="onPrepare();" selected="0" transitions="slide-from-right" cross-fade>
var form1 = document.getElementById("form1");
function onPrepare() {
if (form1.selected==6) {
gBar();
} ...etc
I've also tried things like:
document.getElementById("form1").addEventListener('core-animated-pages-transition-prepare', function() {
alert('Hi');
});
and
document.getElementById("form1").on('core-animated-pages-transition-prepare', function() {
alert('Hi');
});
Applies whether or not valueattr is set.
selectedItem and selectedItemChanged methods declare "old" as a parameter, but I don't see any calls modified to pass this argument.
Hello! I have tried to reproduce demo examples of animated-pages but i have encountered problems.
Which is the problem???
When using core-animated-pages and changing selected to a higher page number the transitions seem normal. When changing from page 1 to 0 the animations seem twice as fast.
How is the best way to show this?
It breaks my overflow, meaning I can see the scroll bar but can not scroll the page and there is no other way to put a external element on top of the animated pages.
(http://stackoverflow.com/questions/27391831/z-index-of-core-animated-pages-ignored)
So far core-animated-pages deals with content within a single url, but is there anything that can do these smooth transitions between urls? Users can really benefit from deep-linked URLs in more complex SPA's, but it'd be great to give them that without having to present them with a flash of white in between pages.
See:
Chrome Dev Summit 2014 website for example: https://developer.chrome.com/devsummit/
smoothState.js: http://weblinc.github.io/jquery.smoothState.js/index.html
All the transitions do work? Because i have tried only hero,cross-fade and slide-from-right work
Hi, I am having a problem replicating "native" behaviour when transitioning between windows (this is mostly relevant to mobile displays with limited screen real-estate).
For example, I would like a "slide-from-right" animation to display the new page with a scroll position at the top of the page, regardless of what scroll position the preceding page had. At the same time I would like to show the previous page in its original scroll position when transitioning back. This seems to be how native apps behave in my experience, where scroll position of pages do not influence each other.
Currently when I am scrolled on the origin page, the same scroll position is shown on the transitioned page. When the new page does not require scrolling (as it is shorter than the preceding page), then a gap at the bottom of the page is shown, until the animation ends whereby it "jumps" into position at scrollTop.
I hope my explanation is clear. I am unsure if this is the intended behaviour and if there is any way to make it more "native"? As a workaround I am using the below hack, which resets the scroll position to top, but of course it is not a smooth transition and when navigating back the position is lost.
document.querySelector('#mainContainer').scroller.scrollTop = 0;
http://stackoverflow.com/questions/25146834/polymer-scrolling-issue
On firefox does not work. Transitioning from first to second page is immediate, while transitioning from second to first page is delayed and after a while again with no transition it is showed.
As of now hero-transition only works with a max of ONE level of nested shadow DOM.
The following naive solution works for me in Chrome 36 (supporting /deep/):
findAllInShadows: function(node, selector) {
if (hasShadowDOMPolyfill) {
var nodes = node.querySelectorAll(selector).array();
var shadowNodes = Platform.queryAllShadows(node, selector, true);
return nodes.concat(shadowNodes);
} else {
- return node.querySelectorAll(selector).array().concat(node.shadowRoot ? node.shadowRoot.querySelectorAll(selector).array() : []);
+ return node.querySelectorAll(selector).array().concat(node.querySelectorAll('* /deep/ ' + selector).array());
}
},When using the core-animated-pages as core-selector with a core-menu, the bind variable "selected" works great, but the selectedModel and selectedIndex both have an issue. They both return the data of the last selected object instead of the current.
I took some captures, hope can help.
Declaration
Output-code
Output-result
can be notice that the INDEX is 0 and the OBJECT.uid too, they both point to the last state instead as the current, and the ITEM.page-uid with the Selected are both at the right state.
If I double tap an animation in the music or news demo it'll jump to the completed state and start animating back.
On my webserver, I downloaded a fresh version of Polymer from bowerarchiver, and the core-animated-pages demo is throwing the following error whenever I click on the page to start the transition:
Exception caught during observer callback: TypeError: undefined is not a function
at core-animated-pages.Polymer.selectedItemChanged (http://localhost:8080/components/core-animated-pages/core-animated-pages.html:425:17)
at core-animated-pages.g.invokeMethod (http://localhost:8080/components/polymer/polymer.js:13:25932)
at core-animated-pages.g.notifyPropertyChanges (http://localhost:8080/components/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:8080/components/polymer/polymer.js:12:18266)
at Object.S.check_ (http://localhost:8080/components/polymer/polymer.js:12:22604)
at c (http://localhost:8080/components/polymer/polymer.js:12:12173)
Looks like this is related to the commit which replaced Platform API with Polymer API.
If I replace all instances of Polymer.flush() with Platform.flush(), the demo works again.
In the documentation example
<core-animated-pages>
<section id="page1"></section>
<nested-page id="page2"></section>
</core-animated-pages>change this to
<core-animated-pages>
<section id="page1"></section>
<nested-page id="page2"></nested-page>
</core-animated-pages>Hi,
I just downloaded the new version 0.5.0, and it looks that your have an error here:
https://github.com/Polymer/core-animated-pages/blob/master/core-animated-pages.html#L425
This line crushes with error:
Uncaught TypeError: undefined is not a function
I assume this is because of the same issue, as described here: http://stackoverflow.com/questions/26122043/paper-dropdown-menu-error-in-observe-js
In order to create choreograph interactions, the used should be able to specify custom delays and durations associated to the respective animation.
Currently there is no way of doing that, All delays and duration are specified globally in CoreStyle.g.transitions
A nice way of doing that would be declarative:
<section id="first">
<div scale-up scale-up-delay=".5s">I should have a delay of .5s</div>
<div scale-up scale-up-delay="1s">I should have a delay of 1s</div>
</section>
<section id="second" layout horizontal>
...
</section>
Thank you.
The selected attribute works fine for setting the page, but afterwards, the current selected is not published back to attribute value. E.g. it never changes from the initial value:
<core-animated-pages transitions="slide-from-right" selected="2">
Is there a reason why not?
(BTW, I've seen this lack of publishing values back attribute with some of other elements as well, and wondering if I'm overestimating their importance - to me they are vital part the element's API, and seem much preferred to listening for custom events, etc.)
http://demo.gcl-11.appspot.com/ at menu 4 > general knowlage > hero button, if you make your screen big enough you can see a scroll bar apearing and disepearing.
Disabling overflow is not a solution because you need to be able to scroll when the screen is to small
tile-cascade and cascade-transition do the same thing, with different names.
Should remove the first maybe?
It seems that a hero-transition from one animated page to one with a <core-header-panel mode="cover"> breaks the panel/toolbar.
I am able to reproduce the behavior with something like this:
<core-animated-pages id="controller" selected="{{selected}}" transitions="hero-transition">
<section>
<div class="container" hero-p>
<div class="card" hero-id="hero" hero on-tap="{{transition}}">
<div class="card-top" style="background:#000;" hero hero-id="bad">
</div>
<div class="card-bottom">
<div class="card-title">
HELLO
</div>
<div class="card-subtitle">
WORLD
</div>
</div>
</div>
</div>
</section>
<section>
<core-header-panel mode="cover">
<core-toolbar id="core_toolbar" class="tall" hero hero-id="hero">
<paper-icon-button icon="arrow-back" on-tap="{{transition}}"></paper-icon-button>
<div flex>HELLO WORLD</div>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
<section layout vertical fullbleed>
<h1 style="color: #fff;" hero hero-id="bad">SAMPLE CONTENT</h1>
</section>
</core-header-panel>
</section>
</core-animated-pages>Here are some basic styles, perhaps something is conflicting, I don't know:
core-animated-pages {
height: 100%;
}
.container {
position: absolute;
top: 275px;
left: 0px;
right: 0px;
text-align: center;
}
.card {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.card-top {
width: 200px;
height: 200px;
text-align: center;
}
.card-bottom {
padding: 8px;
line-height: 1.5;
}
.card-title {
font-weight: bold;
}
core-header-panel {
width: 100%;
height: 100%;
}
core-toolbar {
color: #fff;
background-color: #009688;
}Note: only when mode="cover" does this seem to fail, i.e. mode="tall" is fine.
If you remove the content from the second page's <section> it doesn't have any issues.
Also, this seems to be the most broken on chrome, firefox sort of obscures the bar it seems like, but I didn't test extensively.
I came across this issue because I had a centered <img> with about 200x200 dims which I wanted to cover the center of the toolbar on transition, but after transition, the toolbar would disappear. After some experimentation, seems to be for any content below the <core-toolbar>.
Polymer is awesome, keep up the good work!
Right now I do somthing like this
<core-drawer-panel responsiveWidth="5000px"> //<= My Hack
<my-form drawer iDB="{{iDB}}" iLoad="{{iLoad}}"></my-form>
<core-scroll-header-panel main fit noDissolve keepCondensedHeader condenses>
<core-toolbar layout horizontal class="tall" on-tap="{{home}}">
<core-icon-button id="drawerButton" icon="shopping-cart" on-tap="{{drawer}}"></core-icon-button>
<paper-tabs class="blue bottom fit" selected="{{activePage}}">
<paper-tab>about us</paper-tab>
<paper-tab>the beanies</paper-tab>
<paper-tab>the people</paper-tab>
</paper-tabs>
</core-toolbar>
<core-animated-pages fit content transitions="slide-from-right" selected="{{activePage}}" style="margin-top:192px;"> // <= My other hack
<section>
....Can core-animated-pages make a content attribute so I can use it outside the core-scroll-header-panel and define where the pages are?
(http://stackoverflow.com/questions/26210828/polymer-core-animated-pages-missing-content-attribute)
Multiline paper-inputs do not render correctly when inside a section for a core-animated-page.
<core-animated-pages selectedindex="0"> <paper-input label="label" multiline></paper-input> </core-animated-pages>
This will show a paper-input tag that has the line for the input above the label, rather than beneath it.
typing something into the paper-input and deleting it will fixes the markup, however.
There doesn't seem to be any documentation on when to use cross-fade and cross-fade-all.
If I set up my core-animated-pages with transitions="hero-transition cross-fade slide-down slide-up" and then specify some cross-fade and slide-down animations they don't seem to animate correctly.
<div cross-fade>
<core-toolbar slide-down cross-fade>Demo</core-toolbar>
<p>Demo page!</p>
</div>if I change the core-animated-pages transition to cross-fade-all then it seems to work, but this then causes tile-cascade animations not to work correctly.
Can any one shed some light?
So, I feel a bit bad about opening a bug about this, as I might just be doing something wrong implementation wise, but as I am unable to find a better place to ask/check I will be posting here and technically speaking it is an issue.
I build a fairly simple application using Polymer and a <core-animated-pages> for the main page switching. When switching from the main menu to another page the performance is fine (though slow-ish), however switching back again (a simple cross fade) will often crash mobile chrome and hang for a bit on desktop chrome. Inspecting memory there is no memory spike or anything like that that I could notice, so I am a bit at a loss what's happening here (+ I am far from an expert on inspecting these kind of problems).
Either way, normally I would try building a minimal test case, but in this case I will just link to the entire application as that's probably easier and the application is simple enough that that should pose no problem: www.anotherbibleapp.com/beta/ . The device where chrome is consistently crashing is a LG G3.
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
When you change the .card height in chrome console you will see that the small card tiles in the background hiding behind the big card, suddenly disappear completely when the animation is done.
Is there a way to tell a hero transition to not remove the parent section? Or a way to make the parent section disappear but gradually?
In this case it is ok because you don't see them disappear but when the background has a number of small cards that do not fit behind the large card it would look way better if they just stay in the background.
(http://stackoverflow.com/questions/25840794/hero-transition-background-disappears)
Expected: The previous transition force-finishes early, and the new one starts.
Actual: The first transition does not finish early, and the new property gets applied in such a way that it does not cause a transition at all. The transitionend event is not fired, so the transition does not finish until the 5-second timeout.
Note that if this is the intended behavior, then we should expose complete() as a public function so that clients can force-complete the previous animation if necessary.
Setting transition to null sets a property value of 'null' on IE. Avoid this by setting it to empty string.. Also, we're setting transform to 'none' specifically when I think we can just set it to empty string.
[http://stackoverflow.com/questions/28411829/polymer-core-animated-pages-crash-during-transition-resizing]
As the title says, I have 5 pages, the first 3's heights are scrollable while the last 2 pages are at their fixed height.
The last 2 pages will crash whenever I selected the tab they're on. One thing I notice is that if I set both pages' height to a fair amount of scrollable height, it will not crash, but that wont solve the problem as I need to make it fixed.
I already tried setting them to position:fixed; & overflow-y:hidden; . The same thing will occur. Crashed.
Obviously the reason behind this is because the resizing between the transitions.
Does anyone has any idea why? and how to fix it? Really need your help.
ps: crash on cordova running on android 4.4
But this effect only happens going forward. The transition works correctly moving backwards, presumably because the google map already exists and doesn't need initialization. hero, cross-fade, and slide-up transitions are unaffected.
Also, in case anyone is wondering why the google map init has to happen during the callback, see #10.
Applying the map init on core-animated-pages-transition-end works.
Applying the map init on a timeout for core-animated-pages-transition-prepare also works.
When in the course of human events it becomes necessary to remove the children of a core-animated-pages, an exception is thrown. This is the same behavior as when "selected" is set to an invalid value like -1 or undefined. I don't see this behavior in core-selector itself, though.
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection
at core-animated-pages.Polymer.mixin.selectedItemChanged
at core-animated-pages.properties.invokeMethod
at core-animated-pages.properties.notifyPropertyChanges
at Object.Observer.report_
at Object.createObject.check_
Is there any recourse or is core-animated-pages always supposed to have at least one page? I'm writing a component where pages can be added and removed dynamically.
I made a quick video showing the issue. Repainting on scroll lags significantly behind the user interaction. If I place the content directly into a div and remove core-animated-pages then I do not have this issue.
If you're wondering, I removed the transition animation to ensure that this was not causing the lagging.
https://www.dropbox.com/s/hkbhmbp0rtsoe36/VIDEO0038.mov?dl=0 (7.9MB)
if hero hero-id elements are on different levels of ShadowDOM, transition fails in Chrome (while works fine in Firefox Developer edition). Not sure if it is element's issue, Chrome issue, or behavior by design.
Recently I had a problem with using google-map element inside core-animated-pages. I have layout like this:
<section is="list">
(...)
</section>
<section id="details">
<google-map></google-map>
</section>Initially #list is selected, but when I select #details, map shows up in weird state.
I suspect that it's because map element renders when its parent has set display: none;
If I change
::content > *:not(.core-selected):not([animate]) {
display: none !important;
}to
::content > *:not(.core-selected):not([animate]) {
visibility: hidden !important;
}in core-animated-pages.css, then everything is ok.
What's the best approach to fix this?
It seems to me that tile-cascade transition only works on children of core-animated-pages when they are div tags. Is that correct? If so, why can I not use this on custom elements?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.