private

view-transition-apiを使用したMPAでの実装テスト

個人制作

公開日: 2024/6/27

2024年6月リリースのChrome 126とEdge 126でJavaScriptなしでも利用可能になったView Transiton APIの実装テストを兼ねたサイトです。

JavaScript無しとは言え、view-transition-nameがページ内に複数ある場合には起動しないらしいです。
そのためJSで「pageswap」イベントで遷移元ページからの離脱時にview-transition-nameを付与（その後noneに）と「pagereveal」イベントを使用して遷移先ページの読み込み時にview-transition-nameを付与（その後noneに）というようにview-transition-name一時的に付与することでダブりが無いように実装しました。

下記サイトを参考にしました。

相談・ヒアリングの段階では費用は発生しません。
内容をご確認いただき、ご納得いただいた場合のみ制作へ進みます。

料金表price

作りたいWebサイトの大枠が既に決まっている方は、こちらで概算金額を算出できます。

あくまでも目安としての金額となりますのでご了承ください。

お問い合わせcontact

Webサイト立ち上げのご相談、お見積りのご依頼（無料）などお気軽にお問い合わせください。