Materialdesigns der sinnvollen Übergänge für die Bahn

Question

(Sorry, ich kann nicht jeden Code von dem, was ich bin zu fragen, weil ich nicht wirklich wissen, wo ich anfangen soll.)

über die Meaningful Transitions point in the Material design guidelines.

Ich bin sehr daran interessiert, einen so reibungslosen Übergang innerhalb meiner Web-Anwendungen (especially the one where the profile picture goes from an activity to another), aber ich frage mich, wie es mit HTML zu tun?

Ist CSS3 Übergang genug, um es zu tun (welche Stil-Eigenschaft sollte ich verwenden, um ein Element einfach zu bewegen)?

Soll ich mit JS/Dart das "shared view element" mit dem seltsamen Koordinatensystem bewegen?

Kann es auf dynamischen/Scroll-Layout funktioniert oder sollte ich es vergessen?

Gibt es Tipps, um einen Knoten in einem fließenden Übergang visuell von einem Container zu einem anderen zu verschieben?

Auf den Punkt gebracht, ist HTML bereit für solche Dinge (jeder Code/Dokumentation wäre willkommen)? Sollten wir auf einige Polymerwerkzeuge warten, um dies zu tun? Oder sollten wir das einfach nicht im Web machen?

Answer 1

Schauen Sie sich die Polymerkern-animiert-Seiten Element https://elements.polymer-project.org/elements/neon-animation

Sie haben einige große Demos bekommen, die sehr ähnlich wie die sinnvolle Übergänge sind https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

Die „Icon nach oben Bar“ Demo ist wahrscheinlich die die meisten ähnlich dem Sie verwiesen (Sie können sehen nur die Quelle der Polymer-Webkomponenten verwendet, entlang w/die notwendigen CSS & JS

Sie in Ihr Projekt über Bower importieren können, um zu sehen:

bower install Polymer/core-animated-pages 

und wickeln Sie Ihre Elemente mit und definieren Übergänge mit einem Attribut wie

Hier ist der Code für die Cross-Fading Beispiel:

<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> 

Answer 2

Soweit ich weiß, soll Polymer all dies tun können. Wenn noch nicht, sollte es bald möglich sein.

Die Grundidee hinter Polymer besteht darin, dass Sie konsistente Schnittstellen für alle Geräte (Web, Computer, Android) herstellen können. Also, wenn Android L diese Übergänge machen kann, dann bedeutet das sicher, dass auch Polymer diese Fähigkeit hat.

Answer 3

Polymer macht nichts von diesen Dingen. Das alles ist nur HTML + CSS + JavaScript. Und das alles ohne Polymer.

Alles Polymer macht es möglich, diese Dinge in einem benutzerdefinierten Element zu kapseln.

Die Kernelemente und Papierelemente sind einige Beispiele. Sie können solche Elemente selbst erstellen oder sie klonen und modifizieren/erweitern.