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

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

代码如下：

$('.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: '/'});
        }
    }
});