Closed TinyCoop closed 9 years ago
This is something I want. I've done some reading on web animations but I'm a noobie when it comes to this stuff. http://www.polymer-project.org/platform/web-animations.html http://dev.w3.org/fxtf/web-animations/
Transitions and linkable URLs would be awesome! I'll keep trying to learn web animations. Any tips or ideas are welcome too!
Yes I'm still trying to get my head around it.
I think the ideal solution would be to extend the polymer animated pages component so that when a page is transitioned it pushes it's path to the URL. Maybe something like this.
I think extending core-animated-pages is more in line with the whole polymer approach than replicating the transitions yourself but I guess it depends how easy it looks. Maybe post something to the google group?
Cheers.
On 3 September 2014 14:02, Erik Ringsmuth notifications@github.com wrote:
This is something I want. I've done some reading on web animations but I'm a noobie when it comes to this stuff. http://www.polymer-project.org/platform/web-animations.html http://dev.w3.org/fxtf/web-animations/
Transitions and linkable URLs would be awesome! I'll keep trying to learn web animations. Any tips or ideas are welcome too!
— Reply to this email directly or view it on GitHub https://github.com/erikringsmuth/app-router/issues/17#issuecomment-54292861 .
I want to avoid extending any elements since I'm guessing core-animated-pages
is only the first of many types of web component pages.
I coded up a concept using core-animated-pages
. It's kind of weird because core-animated-pages
extends core-selector
and that's how you choose which page to show. You also have to have all pages in the DOM right away inside the core-animated-pages
element.
With these changes, all the router is doing is listening for a URL change and updating the data binding on the active route to change the selected page using the core-selector
's selected
attribute.
I made a branch of the app-router
with a change to allow you to specify persistOnNavigation
on a specific route. This tells the router to not replace the route with a new instance of the custom element.
https://github.com/erikringsmuth/app-router/tree/persist-on-navigation
I also created a core-animated-pages
branch in the examples and pulled in the app-router
persist-on-navigation
branch. Try running node server.js
in the polymer-animated-pages-routing
folder.
https://github.com/erikringsmuth/app-router-examples/tree/core-animated-pages
I've been staring at this for too long tonight so I'm gonna take a break ;)
This all feels odd to me. There must be a better way that I'm not seeing yet. This might take me a couple weeks to work through but I'll keep at in my spare time.
Great. I think web components are very flexible which means it may be awhile before we settle on a convention over how to work with all of this. Thanks for responding so quickly to my request. I put something up using your work which shows it working with hero transitons.
You can animate between hero1 and hero2 by clicking them I had to add my own history.pushState call for that as there is no way to programatically change pagestate with your router as far as I know?
There seems to be some glitch with firefox? I'm using .htaccess to simply redirect all calls through index.html which allows direct calling of pages - maybe that this is messing with css on an embedded component but not sure why?
Many thanks again. I want to use it in a project I'm working on and I will feedback any thoughts I have while I use it.
Cool! You're changing state correctly with pushState
. I wanted it to be done that way so that the URLs are persisted.
That glitch looks weird! I don't have any ideas there yet.
I'm starting to see why some of the other routers work the way they do. https://gist.github.com/addyosmani/aa3d70356e593f7554c8
The flatiron directory example just listens for a URL change and updates the data binding. It's too simple for most cases, but it might be exactly what we want for core-animated-pages
or anything extending core-selector
.
https://github.com/PolymerLabs/flatiron-director
I put this together to show how flatiron-director
works.
https://github.com/erikringsmuth/polymer-router-demos
I'm leaning away from adding my persistOnNavigation
changes to the app-router
. core-selector
doesn't feel like it fits correctly with the way app-router
works. I'd still like to add transitions and it can probably be done with the hero attributes or web animations. This issue actually made me learn the hero transitions!
I've got core-animated-pages
support in the pipeline https://github.com/erikringsmuth/app-router/commit/15dfd3c00dd432b83ce9a3a82fa17ec57a677b42. The initial chunk of coding is done. It just needs documentation and testing some more variations. I'll hopefully be pushing this out by the end of next week.
<app-router core-animated-pages transitions="hero-transition cross-fade">
<!-- each app-route is a page and you can apply transitions to your pages or elements within them -->
</app-router>
And it's up! http://erikringsmuth.github.io/app-router/#/core-animated-pages
I'm saying it's experimental for now. Depending on which browser and animations I use I've had very mixed results. I can't tell if it's something I'm doing or something with core-animated-pages
. I'm not really doing that much in the first place. When core-animated-pages
is enabled I delegate a lot of the work to a <core-animated-pages>
element in the <app-router>
's shadow DOM. I think it'll be an ongoing thing figuring out the performance issues.
I cannot get the animation work at all with Polymer 0.5.1. Does this feature really work?
The core-animated-pages
are still buggy for some transitions.
This is probably the simplest example that does work. The pages will fade out and in.
<html>
<head>
...
<link rel="import" href="/bower_components/app-router/app-router.html">
<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
</head>
<body unresolved>
<app-router core-animated-pages transitions="cross-fade-all">
...
</app-router>
</body>
</html>
Great router. Been playing around with it and it all works as expected. One thing I wondered would be how compatible it is with animated pages?
In particular if I look at this example of animating sections of the page from chip to card using sections.
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
Can you imagine how this might work with your router so that we could have for example.
/ (default) /fragments /past-prologue
as pages that we could use the back and forward button to navigate?
I think this is important as single page web apps and material design in a way blur the boundary for what is one page and what is the next but I think the user still wants the back button and a url link to work as expected.
Hope this is the right place to put this comment!