All geek questions in one place

Material design of significant transitions for the Internet

(Sorry, I can’t provide any code for what I ask because I don’t know where to start.)

About Significant Transitions in the Material Design Guide .

I am very interested in creating such a smooth transition inside my web applications ( especially the one where the profile image goes from one operation to another ), but I am wondering how to do this using html?

  • Is CSS3 enough for this transition (which property style should be used to simply move the element)?
  • Should I use JS / Dart to move the "common view item" using a weird coordinate system?
  • Can it work with dynamic / scroll layout or should I forget about it?
  • Are there any tips for visually moving a node from a container to another with a smooth transition?

In short, is HTML ready for such material (will any code / documentation be appreciated)? Should I wait for some polymer tools? Or are we just not doing this on the Internet?

+6
source share
3 answers

Check out the Core Animated Pages Polymer element https://elements.polymer-project.org/elements/neon-animation

They have great demos that are very similar to meaningful transitions https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

The "Icon to top bar" demo is probably the most similar to the one you referenced (you can simply view the source to see the Polymer web components used, as well as the necessary CSS and JS

You can import into your project through Bower:

bower install Polymer/core-animated-pages

And wrap your elements and define transitions with an attribute like

Here is the code for an example of cross fading:

 <style> #hero1 { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: orange; } #hero2 { position: absolute; top: 200px; left: 300px; width: 300px; height: 300px; background-color: orange; } #bottom1, #bottom2 { position: absolute; bottom: 0; top: 0; left: 0; height: 50px; } #bottom1 { background-color: blue; } #bottom2 { background-color: green; } </style> // hero-transition and cross-fade are declared elsewhere <core-animated-pages transitions="hero-transition cross-fade"> <section id="page1"> <div id="hero1" hero-id="hero" hero></div> <div id="bottom1" cross-fade></div> </section> <section id="page2"> <div id="hero2" hero-id="hero" hero></div> <div id="bottom2" cross-fade></div> </section> </core-animated-pages>
+7
source
The polymer does none of this. This is just HTML + CSS + JavaScript. And you can do it all without Polymer.

Everything that Polymer does allows you to encapsulate these things in a custom element.

The main elements and paper elements are some examples. You can create such elements yourself or clone and modify / expand them.

+5
source

As far as I know, the polymer should be able to do all this. If not already, he should be able soon.

The main idea of ​​the polymer is that you can create consistent interfaces for all devices (web, computer, Android). Therefore, if Android L can perform these transitions, then they certainly mean that the polymer also has such an opportunity.

+2
source

Source: https://habr.com/ru/post/971611/

More articles:


All Articles