Chrome View Transitions APIについて

Chrome View Transitions APIは、Chrome 111で新たに追加されたAPIで、ウェブアプリケーションでの画面遷移時に簡単かつスムーズなアニメーションを実現することが可能
これにより、ウェブアプリケーションのユーザーエクスペリエンスが向上ができる

目次

主な機能
使用例
詳細な情報
注意点

主な機能

簡単な画面遷移アニメーションの実装

View Transitions APIを使用することで、ウェブ開発者は簡単に画面遷移アニメーションを実装し、ユーザーエクスペリエンスを向上が可能

カスタマイズ可能なアニメーション設定

APIは、遷移アニメーションの方法、時間、イージングなどを簡単に設定できるように設計されている

使用例

以下は、View Transitions APIを使用して画面遷移アニメーションを実装する例

// 新しいページへの遷移時にフェードインアニメーションを実行する
const viewTransition = new ViewTransition({
  type: 'fade',
  duration: 300,
  easing: 'ease-out'
});

// 遷移を開始する
viewTransition.start().then(() => {
  // 遷移が完了した後の処理をここに記述
});

以下に、Reactでの詳細なサンプルを記載

// src/App.js
import React, { useCallback } from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';
import NewPage from './NewPage';

const Home = () => {
  const history = useHistory();

  const handleNavigate = useCallback(async () => {
    // 新しいページへの遷移時にフェードインアニメーションを実行する
    const viewTransition = new ViewTransition({
      type: 'fade',
      duration: 300,
      easing: 'ease-out',
    });

    // 遷移を開始する
    await viewTransition.start();

    // React Routerで遷移する
    history.push('/new-page');
  }, [history]);

  return (
    <div>
      <button onClick={handleNavigate}>Navigate to New Page</button>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/new-page" component={NewPage} />
      </Switch>
    </Router>
  );
};

export default App;

詳細な情報

詳細な情報やドキュメントについては、以下のリンクを参照

New in Chrome 111: View Transitions API

注意点

View Transitions APIは、Chrome 111以降でのみ利用可能です。そのため、対応していないブラウザでは、適切なフォールバック方法が必要
現時点では、APIはまだ実験的な段階にあり、仕様が変更される可能性があるため、注意が必要