Polymeric animated pages used with Angularjs

I would like to ask if there are examples related to Polymer Animated Pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how can we build a similar demo using the resources provided in the Angular / material repository ( https://github.com/angular/material ).

I would like to reach http://www.polymer-project.org/components/core-animated-pages/demos/music.html , but I don't want to use Polymer as I would like to use Angular.

Could you provide me with some directions to get started?

+3


source to share


1 answer


What they usually do with Polymer has two related elements that only show one, and when you perform an action, the other is displayed (from display: none

) and animated from certain values ​​to its final shape. Sometimes the elements also change, but it depends on whether the content can move to a new position or not.

You need to work with css transition

, transform

and display

. Sometimes even custom animations. And you basically change multiple divs to their final shape. I think the hardest part would be to animate the colors (white to pink or yellow to green, for example), as this is the hardest to accomplish (from a performance standpoint).

If you look at the example you installed (final link), you will see a list of elements with a detailed div, and as soon as you click on the element that will display the detail and convert the content to its final parameters.

Just know that these things are pretty tricky if you are not really into Angular or HTML / CSS / Javascript.



The Polymer for Web framework is a lot of work, and I wouldn't be surprised if it takes months to get similar results for both native and websites.

You can take an example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http: // codepen .io / collection / amheq / . And don't forget to speed it up using some bootstrap theme like http://fezvrasta.github.io/bootstrap-material-design/ or something like that.

I have been struggling with the same problem as not much now. You have specified an Angular project, but it will take time. If you want to do this now, you have some work to do (if you do, share it with us), but you might be better off postponing this until most bugs and issues are resolved. What I am doing now.

+1


source







All Articles