「Web開発における近年最も重要な進歩の1つ」 ー JavaScriptを使わないビュー遷移を実現するView Transition APIをAstroがサポート
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。 Zero-JavaScript View Transitions View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。 AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっ
View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers
View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、マルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されている場合でも、サイト内を移動する際に視覚的な魅力のあるユーザー エクスペリエンスを実現できます。 ビュー遷移を使用する一般的な状況は次のとおりです。 商品リスティング ページのサムネイル画像。商品の詳細ページではフルサイズの商品画像に切り替わります。 ページからページを移動しても常に表示される、固定されたナビゲーション バー。 フィルタ処理に伴って位置が移動するアイテムを示すグリッド。 <ph type="x-smartling-placeholder"></ph> View Transition API で作成された遷移。デモサイ
8月31日、LogRocket Blogで「Next.js View Transitions API」と題した記事が公開された。この記事では、Next.jsでのView Transitions APIの使用方法とその利点について詳しく紹介されている。 View Transitions APIとは View Transitions APIは、特にナビゲーション中のWebアプリケーションのユーザー体験を向上させるための新しいブラウザ機能だ。このAPIを使用すると、DOM状態の変化やページ間のナビゲーションにおいてスムーズなアニメーションを実現できる。 従来、WebアプリケーションでのトランジションにはJavaScriptやCSS、さらには多くのライブラリが必要だったが、このAPIを使うことで、標準化された方法でトランジションを簡単に実装できるようになった。これにより、複雑さが削減され、アニメー
View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafariで使用可能となり、主要ブラウザすべてでサポートされることが見込まれます。 これまでにないダイナミックな効果を表現できるView Transition APIは使いこなせばWeb制作者にとって大きな武器となるでしょう。 基本的な設定 ファインチューニング 不具合 バットマン！！！！！ 基本的な設定 View Transition APIは、おそらく最も興奮する新しいCSSメカニズムの1つです。SPA(シングルページアプリケーション)のようなページ遷移をネイティブに構築する方法を提供することを約束
Web ブラウザの View Transition 機能 ここでいう "View Transition" というのは、Web ブラウザが提供する機能のことで、2 つの表示状態の遷移にアニメーション効果を付けることのできる、JavaScript API として公開されている機能です。 下記リンク先の冒頭の動画がわかりやすいです。画面間の遷移がアニメーション効果で滑らかに繋がってヌルヌル動きます。 MDN の説明は以下のリンク先を参照ください。 基本的な使い方はとてもシンプルで、表示を変更・書換えを行なう処理を、document オブジェクトの startViewTransition メソッドに渡すだけです。こうすると、変更前の表示状態と、変更後の表示状態が、アニメーション効果で滑らかに繋がって遷移します。下記例は同期処理を startViewTransition の引数に渡していますが、Pr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsでView Transition APIを使おう — WebページのUXを大幅に向上させる新たなブラウザ機能
インパクト大！View Transition APIによるページ遷移の実装例 - コハム
Blazor でも View Transition したい - Qiita