gui: ドキュメントの全画面表示時のアニメーション 特にテーマが同一時にわかりにくかったので。 view-transition-name だけ指定してスタイルはデフォルト任せだが、 どうやら Blink も Webkit も view-transition-name が指定されて いる場合は scale と opacity の同時アニメーションがデフォルト らしく、特に指定しなくてもいい感じになっているのでそのまま。

Changes

1 changed files (+33/-9)

• packages/gui/src/docs/components/Preview.astro
  • @@ -127,6 +127,20 @@ event.stopPropagation();
    fullscreenTarget.click(); }); + function toggleFullscreen({ container, trigger, icon }) { + if (container.classList.contains("fullscreen")) { + container.classList.remove("fullscreen"); + icon.textContent = "←→"; + trigger.title = "全画面表示"; + fullscreenTarget = null; + } else { + container.classList.add("fullscreen"); + icon.textContent = "→←"; + trigger.title = "全画面表示をやめる"; + fullscreenTarget = trigger; + } + } + for (const button of document.getElementsByClassName("fullscreen-button")) { button.addEventListener("click", (event) => { event.preventDefault();
  • @@ -139,16 +153,26 @@ }
    const icon = button.querySelector(".fullscreen-button-icon"); - if (container.classList.contains("fullscreen")) { - container.classList.remove("fullscreen"); - icon.textContent = "←→"; - button.title = "全画面表示"; - fullscreenTarget = null; + if (typeof document.startViewTransition === "function") { + container.style.viewTransitionName = "preview"; + + const transition = document.startViewTransition(() => { + toggleFullscreen({ + container, + trigger: button, + icon, + }); + }); + + transition.finished.then(() => { + container.style.viewTransitionName = ""; + }); } else { - container.classList.add("fullscreen"); - icon.textContent = "→←"; - button.title = "全画面表示をやめる"; - fullscreenTarget = button; + toggleFullscreen({ + container, + trigger: button, + icon, + }); } }); }