Zehen in Sichtweite eintauchen

Ehrlich gesagt ist die Ansichtsübergangs -API für mich ein bisschen entmutigend. Viele Tutorials zeigen beeindruckende Demonstrationen darüber, wie wir die Konvertierung zwischen zwei Seiten animieren, die normalerweise mit dem einfachsten Beispiel beginnen:

@view-transition {
  navigation: auto;
}

Aber dies ist normalerweise das Ende des einfachen Teils, und das Tutorial greift dann in das JavaScript -Bereich ein. Das ist natürlich nichts Falsches, aber es ist ein großer Sprung für jemanden wie mich, der Schritt für Schritt lernt. Also wurde ich inspiriert, als ich Onkel Dave und Jim Neilsen über eine sehr praktische Konversionstechnik (den Titel) teilten.

Sie können sehen, wie es auf Jims Website funktioniert:

Dies ist genau das perfekte "Snack" -Experiment, bei dem ich gerne neue Dinge probiere. Es beginnt mit dem gleichen @view-transition Code -Snippet, mit dem beide Seiten zur API der Ansicht übergeht: der aktuellen Seite und der Seite, auf die Sie navigieren möchten. Von hier aus können wir sie als "neue" bzw. "alte" Seiten betrachten.

Ich habe auch den gleichen Effekt auf meinen persönlichen Blog erreicht:

Dies ist eine perfekte Übung für einen Blog, oder? Es wird zunächst view-transition-name auf dem Element festgelegt, das wir an der Konvertierung beteiligen möchten, in diesem Fall der Artikeltitel auf der Seite "Old" und den Artikeltitel auf der Seite "neu".

Wenn unsere Tags wie folgt sind:

<h1 id="Notes">Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

… wir können ihnen in CSS das gleiche view-transition-name geben:

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

Dave wies schnell darauf hin, dass wir den Benutzern, die es vorziehen, die Bewegung zu reduzieren, sicherstellen können, dass diese Einstellung nur angewendet wird, wenn ihre Systemeinstellungen Übung ermöglichen:

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

Wenn nur diese beiden Elemente auf der Seite sind, funktioniert dies ordnungsgemäß. Wir haben jedoch eine Liste von Artikellinks, die alle ihre eigene einzigartige view-transition-name haben müssen. Hier hat Jim einige Schwierigkeiten in seiner Arbeit, denn wie genau machen Sie das, wenn es darum geht, neue Blog -Beiträge zu veröffentlichen? Müssen Sie Ihr CSS bearbeiten und jedes Mal, wenn Sie neue Inhalte veröffentlichen möchten, einen neuen Conversion -Namen finden? Nein, es muss einen besseren Weg geben.

es tut. Oder zumindest in der Zukunft. Es ist noch nicht Standard. Tatsächlich hat Bramus dies kürzlich geschrieben, als er über Chromes Arbeit über die attr() -Funktion diskutierte, die in einer Erklärung eine Reihe einzigartiger Kennungen generieren kann. Sehen Sie sich dieses zukünftige CSS an:

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
  view-transition-class: card;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div></custom-ident>

Großartig! Ich möchte es jetzt benutzen! Es ist schade, dass es nicht nur darauf warten muss, dass Chrome es entwickelt, sondern auch, damit andere Browser es übernehmen und implementieren können. Wer weiß also, wann wir es tatsächlich bekommen können. Derzeit ist es am besten, eine Programmierlogik direkt in der Vorlage zu verwenden. Meine Website läuft auf WordPress, damit ich auf PHP zugreifen und einen Inline -Stil generieren kann, der view-transition-name für beide Elemente festgelegt wird.

Artikeltitel befindet sich in der Vorlage für meinen individuellen Blog -Beitrag. In WordPress Jargon ist das die single.php -Datei.

@view-transition {
  navigation: auto;
}

Artikellinks befinden sich in der Vorlage des Artikelsarchivs. In WordPress ist dies normalerweise archive.php:

<h1 id="Notes">Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

Sehen Sie, was dort passiert ist? Das Attribut view-transition-name wird direkt auf zwei Konvertierungselementen eingestellt und verwendet PHP, um Namen basierend auf der zugewiesenen ID des Artikels in WordPress zu generieren. Eine andere Möglichkeit besteht darin, der Vorlage ein <style></style> Tag hinzuzufügen und die Logik dort zu platzieren. Beide Methoden sind im Vergleich zu dem, was Sie in Zukunft erreichen können, gleichermaßen ungeschickt. Wählen Sie also die, die Ihnen gefällt. attr()

Wichtig ist, dass diese beiden Elemente jetzt das gleiche

teilen und wir uns view-transition-name angeschlossen haben. Mit diesen beiden Elementen kann die Konvertierung funktionieren! Wir müssen nicht einmal @view-transition definieren (aber Sie können), weil die Standardkonvertierung das ganze schwere Heben durchführt. @keyframes

In dem gleichen "leichten Geschmack" habe ich die neueste Ausgabe von Modern Web Weekly gesehen und ich benutze diesen kleinen Ansichtsübergang gerne auf dem Optionsfeld:

Beachten Sie, dass JavaScript das Standard -Klickverhalten von Optionsfeldern blockieren muss, damit die Konvertierung vor dem Eingeben ausgeführt wird.

Das obige ist der detaillierte Inhalt vonZehen in Sichtweite eintauchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!