子比主题 – 昼夜切换模式新增过度动画

飞流 · 发表于 2025-10-10 16:36:45

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

逛论坛的时候发现一款子比主题切换昼夜和白天模式的时候通过JS改了子比的源代码来实现的过度动画的效果，这个效果非常好看，喜欢的自行部署吧！

代码部署

定位：/wp-content/themes/zibll/js/main.min.js，我们要修改这个文件，但是这个文件是压缩后的，不好去改，那么我们再去定位：/wp-content/themes/zibll/js/min.js，这个文件是没有压缩的js代码，跟上面压缩的是代码是一样的，我们要有一个逻辑，我们先去改min.js文件的然后去粘贴到main.min.js，然后再压缩就可以了，话不多说直接开始！
tengfei_down - 2025-10-10T163604.776.webp

tengfei_down - 2025-10-10T163604.776.webp

代码如下

$('.toggle-theme').click(function(e) {
// 缓存所有DOM元素和初始值，避免重复查询
var body = $('body');
var isDark = body.hasClass('dark-theme');
var tinymceBody = $('#post_content_ifr').contents().find('body');
var enlighter = $('.enlighter-default');
var highClasses = {
white: 'enlighter-t-' + _win.highlight_white_zt,
dark: 'enlighter-t-' + _win.highlight_dark_zt
};
// 计算半径只需要一次
var radius = Math.hypot(
Math.max(e.clientX, window.innerWidth - e.clientX),
Math.max(e.clientY, window.innerHeight - e.clientY)
);
// 优化为一个函数调用
applyThemeTransition(e.clientX, e.clientY, radius, isDark);
// 核心函数 - 处理主题过渡
function applyThemeTransition(x, y, endRadius, isDark) {
// 1. 准备样式
prepareStyles(isDark);
// 2. 切换图片
$('img[switch-src]').each(function() {
var img = $(this);
var src = img.attr('data-src') || img.attr('src');
var switchSrc = img.attr('switch-src');
img.attr({
'src': switchSrc,
'switch-src': src,
'data-src': ''
});
});
// 3. 应用主题切换
if (typeof document.startViewTransition === 'function') {
try {
// 使用View Transition API
document.startViewTransition(function() {
applyTheme(isDark, body, tinymceBody, enlighter, highClasses);
}).ready.then(function() {
// 应用动画
var clipPaths = isDark
? [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`] // 黑→白：收缩
: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]; // 白→黑：扩散
var element = isDark ? '::view-transition-old(root)' : '::view-transition-new(root)';
document.documentElement.animate(
{ clipPath: clipPaths },
{ duration: 750, easing: 'ease-out', pseudoElement: element }
);
});
} catch {
// 动画失败时直接切换
applyTheme(isDark, body, tinymceBody, enlighter, highClasses);
}
} else {
// 不支持动画API时直接切换
applyTheme(isDark, body, tinymceBody, enlighter, highClasses);
}
}
// 准备样式函数
function prepareStyles(isDark) {
// 确保基础样式存在
var baseStyle = document.getElementById('view-transition-styles');
if (!baseStyle) {
baseStyle = document.createElement('style');
baseStyle.id = 'view-transition-styles';
baseStyle.textContent = `
::view-transition-old(root), ::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-image-pair(root) { isolation: auto; }
`;
document.head.appendChild(baseStyle);
}
// 设置z-index
var zStyle = document.getElementById('z-transition-style') ||
document.head.appendChild(document.createElement('style'));
zStyle.id = 'z-transition-style';
zStyle.textContent = isDark
? `::view-transition-old(root){z-index:999}::view-transition-new(root){z-index:1}`
: `::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:999}`;
}
// 应用主题函数
function applyTheme(isDark, body, tinymceBody, enlighter, classes) {
if (!isDark) {
// 切换到暗色
tinymceBody.addClass('dark-theme');
enlighter.addClass(classes.dark).removeClass(classes.white);
body.addClass('dark-theme');
$.cookie('theme_mode', 'dark-theme', {path: '/'});
} else {
// 切换到亮色
tinymceBody.removeClass('dark-theme');
enlighter.addClass(classes.white).removeClass(classes.dark);
body.removeClass('dark-theme');
$.cookie('theme_mode', 'white-theme', {path: '/'});
}
}
});

复制代码

	飞流：这论坛到底有没有资本给我投资一下啊！	07-20 22:07
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 子比主题 – 昼夜切换模式新增过度动画

起源之星

任务·年会员

累计签到LV.3

摩羯座

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

起源之星

任务·年会员

累计签到LV.3

摩羯座

关于我们

常用功能

服务引导