使用 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 属性来添加更多过渡样式
反应示例
佳可商务购物程序 2004
下载
在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台
如果你喜欢这种类型的 css 技巧，请考虑关注 jhey
