◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
查看过渡主题动画
ID:15543 / 打印
使用 css 和视图转换从浅色模式转换为深色模式时添加炫酷效果
复制自 twitter 上的@jhey [！注意] 这假设您已经设置了暗光模式，并具有某种功能来更新您的主题
- 添加css
/* 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%); } } - 确保在根元素上设置 data-style="angled" 属性 在 spa react 中我们使用 useeffect 钩子
useeffect(() => { // set the data-style attribute document.documentelement.dataset.style = "angled"; }, []); 在ssr中可以直接在html标签中设置
- 将主题更改函数包装在 documnet.startviewtransition 中以启动视图转换
function transitioncolors() { if (typeof window !== "undefined") { document.startviewtransition(() => { const newtheme = theme === "light" ? "dark" : "light"; document.documentelement.dataset.theme = newtheme; updatetheme(newtheme); }); } } 可以通过包含相应的 css 文件并添加正确的 data-style 属性来添加更多过渡样式
<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
