Zunächst habe ich es schwer, die Grundlagen des Helden-Übergangs innerhalb von Polymer zu verstehen. Ich versuche eine "held transition card" zu erstellen, wie sie in dem von ihnen zur Verfügung gestellten Beispiel zu finden ist, die man finden kann hier . Unten habe ich die Mini-Karte gebaut und ich versuche nur den Übergang zu verstehen und wie die größere Karte mit der kleineren funktioniert.
Meine spezielle Frage ist, wie bindet sich der Übergang an jedes Element? Muss ich das CSS für beide fertigstellen, bevor ich mit den Kern-animierten Seiten anfangen kann? Ist es wichtig, ein eingebettetes Template zu haben?
Jede Anleitung wäre sehr hilfreich.
%Vor%Sie sind tatsächlich sehr nah an einem funktionierenden Übergang mit dem Code, den Sie haben.
Ich habe einen komplizierteren Heldenübergang auf meiner Website implementiert und habe von dort aus Code genommen, um deins zum Arbeiten zu bringen.
%Vor%Ich habe nur ein paar Anpassungen vorgenommen.
hero-p -Attribut genau dieses Attribut enthalten. Also keine Notwendigkeit für die Anführungszeichen :) <paper-shadow hero-p .. >
hero -Attribut. <div id="chip_body" .. hero .. > <div id="card_container" .. hero .. >
Ich habe eine funktionierende Version Ihres Codes auf meiner Website veröffentlicht.
Es gibt eine Seite mit dem <chip-card> -Element und eine zweite Seite mit der Arbeitsvorlage.
Bitte beachten Sie : Ich habe den Verweis auf webcomponentsjs geändert, um meiner Ordnerstruktur zu entsprechen.
Fühlen Sie sich frei, mich zu fragen, ob es noch etwas gibt!
Tags und Links html css polymer shadow-dom