使用 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 属性来添加更多过渡样式
(document.documentElement.dataset.style = e.target.value) } > Default Vertical Wipe Angled Flip Slides
反应示例
如果你喜欢这种类型的 css 技巧，请考虑关注 jhey
以上就是查看过渡主题动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629924.html
微信扫一扫 
支付宝扫一扫 
