つま先は視聴遷移に浸します-CSSチュートリアル-php.cn

つま先は視聴遷移に浸します

Lisa Kudrow

リリース： 2025-03-07 16:37:09

オリジナル

409 人が閲覧しました

Toe Dipping Into View Transitions

率直に言って、View Transition APIは私にとって少し困難です。多くのチュートリアルには、2つのページ間の変換をアニメーション化する方法に関する印象的なデモンストレーションを示しています。これは通常、最も簡単な例から始まります。

@view-transition {
  navigation: auto;
}

ログイン後にコピー

しかし、これは通常、単純な部分の終わりであり、チュートリアルはJavaScriptの領域を掘ります。もちろん、これは何も悪いことではありませんが、段階的に学ぶ私のような人にとっては大きな飛躍です。それで、私はデイブおじさんとジム・ニールセンが非常に実用的な変換技術（タイトル）について共有しているのを見たときにインスピレーションを受けました。

ジムのウェブサイトでどのように機能するかを見ることができます：

これは、新しいことを試してみたいと思っている完璧な「スナック」実験です。両方のページを表示するために使用される同じ

コードスニペットから始まります。ここから、それらをそれぞれ「新しい」ページと「古い」ページと考えることができます。 @view-transition

私は自分のブログにも同じ効果を達成しました：

これはブログに最適なエクササイズですよね？最初に、コンバージョンに参加したい要素、この場合は「古い」ページの記事のタイトルと「新しい」ページの記事タイトルに

を設定します。 view-transition-name したがって、タグが次の場合：

の場合

…CSSで同じ

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

ログイン後にコピー

を与えることができます：

view-transition-name

デイブは、運動を減らすことを好むユーザーを尊重することができることをすぐに指摘しました。この設定は、システムの設定が運動を許可した場合にのみ適用されることを指摘しました。

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

ログイン後にコピー

ページにこれら2つの要素のみがある場合、これは適切に機能します。ただし、記事のリンクのリストがあり、そのすべてに独自のユニークな

が必要です。それは、ジムが彼の仕事にいくつかの困難を抱えている場所です。なぜなら、新しいブログ投稿を公開することに関してこれをどのように正確に行うのか？ CSSを編集して、新しいコンテンツを投稿するたびに新しい変換名を作成する必要がありますか？いいえ、より良い方法がなければなりません。

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

ログイン後にコピー

そうです。または、少なくとも将来的には。まだ標準ではありません。実際、Bramusは最近、これをview-transition-name関数に関するChromeの研究について議論しながらこれを書きました。これは、宣言で一連の一意の識別子を生成できるようになります。この将来のCSSを見てください：

attr()素晴らしい！今すぐ使いたい！ Chromeがそれを開発するのを待つだけでなく、他のブラウザがそれを採用して実装する必要があるのは残念です。現時点では、最良の方法は、テンプレートでプログラミングロジックを直接使用することです。私のウェブサイトはWordPressで実行されているため、PHPにアクセスして、両方の要素に

を設定するインラインスタイルを生成できます。

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

ログイン後にコピー

記事のタイトルは、個々のブログ投稿のテンプレートにあります。 WordPress Jargonでは、それがsingle.phpファイルです。

@view-transition {
  navigation: auto;
}

ログイン後にコピー

記事リンクは、記事アーカイブのテンプレートにあります。 WordPressでは、これは通常archive.php：

です

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

ログイン後にコピー

そこで何が起こったのか見てみましょうか？ view-transition-name属性は、PHPを使用してWordPressの記事の割り当てられたIDに基づいて名前を生成する2つの変換要素に直接設定されます。別の方法は、テンプレートに<style></style>タグを追加して、そこにロジックを配置することです。どちらの方法も、将来達成できるものと比較して同様に不器用ですので、好きなものを選択してください。 attr()

重要なことに、これらの2つの要素は同じ

を共有し、view-transition-nameに参加しました。これらの2つの要素では、変換が機能します！デフォルトの変換はすべての重い持ち上げを行うため、@view-transition（ただし、できます）を定義する必要さえありません。 @keyframes

同じ「わずかな味」の精神で、私はModern Web Weeklyの最新号を見ました、そして、私はラジオボタンでこの小さなビューの遷移を使用するのが好きです：

JavaScriptは、入力する前に変換が実行されるようにラジオボタンのデフォルトのクリック動作をブロックするために必要であることに注意してください。

以上がつま先は視聴遷移に浸しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。