ホームページ > 記事 > ウェブフロントエンド > トランジションテーマのアニメーションを表示する
twitter の @jhey からコピーしました
[!NOTE]
これは、テーマを更新するための何らかの機能を備えたダークライト モードがすでに設定されていることを前提としています
/* Angled */ [data-style='angled']::view-transition-old(root) { animation: none; z-index: -1; } [data-style='angled']::view-transition-new(root) { animation: unclip 1s; clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax); } @keyframes unclip { 0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); } }
useEffect(() => { // set the data-style attribute document.documentElement.dataset.style = "angled"; }, []);
SSR では HTML タグに直接設定できます
function transitionColors() { if (typeof window !== "undefined") { document.startViewTransition(() => { const newTheme = theme === "light" ? "dark" : "light"; document.documentElement.dataset.theme = newTheme; updateTheme(newTheme); }); } }
対応する CSS ファイルをインクルードし、正しいデータ スタイル属性を追加することで、より多くのトランジション スタイルを追加できます
<select className="select select-bordered select-sm max-w-xs" onChange={(e) => (document.documentElement.dataset.style = e.target.value) } > <option value="default">Default</option> <option value="vertical">Vertical</option> <option value="wipe">Wipe</option> <option value="angled">Angled</option> <option value="flip">Flip</option> <option value="slides">Slides</option> </select>
反応例
このタイプの CSS トリックが好きなら、jhey をフォローすることを検討してください
以上がトランジションテーマのアニメーションを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。