ビューポート外のビュートランジション

CSS ビュー トランジションが Chrome に導入され、(良くも悪くも) 現在、ほとんどのエンド ユーザーが広く利用できるようになりました。 Safari もそれほど遅れを取っておらず、この機能は TP で利用可能であり、Firefox は少なくともそれに取り組んでいます。

複数ページのトランジションの実装が非常に簡単になったことは気に入っていますが、同時に、ビューポートの外にある要素が激しく飛び回り始めるという詩人の大きな不満にも気づきました。

私のブログでは Javascript を使用してこれを扱います。 IntersectionObserver は、表示されている間、カスタム プロパティに view-transition-name を設定します。見えない限り、プロパティは設定解除され、遷移はトリガーされません。これは機能しますが、HTML、JavaScript、CSS が相互に依存する必要があります。プレゼンテーションは CSS に依存するという精神から、もっとシンプルな解決策が欲しいです。

最近 Chrome に役立つ可能性のあるもう 1 つの機能が追加されました。それは、スクロール駆動のアニメーションです。残念ながら、これはまだ Chrome でのみ利用可能です。 Firefox はフラグの後ろにそれを持っていますが、Safari はここで活動の兆候を示しません。しかし、前述の Javascript ソリューションに正常にフォールバックすることも、単にビューポートの検出を無視してとにかくアニメーションを表示することもできます (これは、この記事の執筆時点では Safari の場合です)。

シンプルな移行

ビューの遷移自体から始めて、すべてをまとめてみましょう:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>

これで、ナビゲーション時に page1.html の div が page2.html のバージョンに変換されることがわかります。 CSS の @view-transition at-rule もドキュメント全体でクロスフェードを開始します。遷移時間はデフォルトで 0.4 秒に設定されていますが、これを制御するために数行を追加できます。

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

::view-transition-group(*) {
    animation-duration: var(--view-transition-duration);
}

持続時間は --view-transition-duration によって設定されます。上部の @property ルールは完全にオプションですが、 --view- を設定すると、アニメーション継続時間が無効な値ではなく 0.4 秒にフォールバックします。移行期間: 偽です。

ビューポートの処理

それでも、ページ遷移時に要素がビューポートの外にある場合でも、要素はアニメーション化し、どこから来たのか、どこへ行くのかを示さずに、表示されている画面全体に入り込んだり、表示されている画面全体を通過したりすることがあります。私はその行動がとてもイライラします。

スクロール駆動のアニメーションにより、スクロールとビューポートの相対位置に基づいてスタイルを制御できるツールが追加されました。したがって、ビュー遷移のトリガーも制御できます:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

enable-vt キーフレーム アニメーションは、アニメーションなしからテキスト文字列を含むカスタム プロパティにスムーズに移行できないため、ハードカットになります。要素が部分的にでもビューポートに出入りすると、アニメーション範囲がトリガーされます。アニメーション自体は、可能な限り迅速にトリガーされるように --enable-view-transition を 0.1% と 99.9% に設定します。アニメーションが開始または終了する場所のヒントを取得したらすぐにビューの遷移を有効にしたいと考えています。

最後に、--enable-view-transitions は、スクロール駆動アニメーションによって、なし、または --view-transition-name という新しいカスタム プロパティのいずれかに設定されます。画面カバレッジの 0.1% から 99.9% の間で設定され、ビューポートの上下 (または左右どちらの持ち方でも) のビューの遷移が無効になります。この新しいプロパティは、さまざまな要素に個別のアニメーションを設定する場合に役立ちます。 --view-transition-name.
に一意の値を設定することで、各要素は独自のトランジションを取得できます。

<div>



<p>これは、ソース ページとターゲット ページの両方で行う必要があります。値が設定されていない場合は、デフォルトで、残りのすべての data-view-transition 要素を均一に制御する default-view-transition が使用されます。</p>

<h2>
  
  
  現実世界の実装
</h2>

<p>私はこの実装を私の小さな CSS ボイラープレート、Ssstyles に追加しました。要素にソース ページとターゲット ページの data-view-transition 属性を与えると、要素は両方の間で遷移できるようになります。 --view-transition-name を指定すると、他の同様の要素から独立した独自のアニメーションを持たせることができます。 --view-transition-duration を設定すると、トランジションの継続時間を制御します。</p>


          </div>

            
        

以上がビューポート外のビュートランジションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。