解决bfcache与动画库逻辑冲突

前言

省流:因为bfcache导致页面返回时直接显示静态内容，但是又因为动画库的机制触发动画，从而导致内容先出现然后触发动画又出现一遍的异常闪烁。

在使用 全站 PJAX（PushState + AJAX）时，我们常常会遇到的问题：用户使用浏览器“返回”按钮时，页面上的动画（比如 UIkit 的 Scrollspy 动画）会闪烁或重新播放，导致体验不佳。本文分享一个解决方案。

问题现象

1. 用户访问页面 → 动画正常播放
2. 用户点击浏览器“返回”按钮 → 页面从 bfcache 恢复
3. 页面元素立即渲染 → Scrollspy 在下一帧检测视口 → 动画触发
4. 用户看到的页面先是“静态状态”，然后才执行动画 → 产生闪烁

解决思路

1. 返回页面时禁用动画
   • 无论是 bfcache 还是 popstate 返回
   • 添加一个 CSS class（no-uk-animation）控制 UIkit 动画暂时禁用
2. 下一次 PJAX 加载新页面完成后再恢复动画
   • 保证新页面的动画正常播放
   • 避免返回页面瞬间闪烁或重复触发动画

核心逻辑：使用标记变量管理动画状态，并监听 pageshow、popstate 和 PJAX 的 pjax:end 事件。

实现方案

以下代码针对我自己的主题，知道思路就行，可以让ai实现。

JS 代码

(function($) {
    function initBackDetection() {
        let animationEnabled = true;

        function disableAnimations() {
            if (!animationEnabled) return;
            animationEnabled = false;
            document.documentElement.classList.add("no-uk-animation");
            console.log("[NAV] animations disabled for back navigation");
        }

        function enableAnimations() {
            if (animationEnabled) return;
            animationEnabled = true;
            document.documentElement.classList.remove("no-uk-animation");
            console.log("[NAV] animations re-enabled after PJAX");
        }

        window.addEventListener('pageshow', function(e) {
            if (e.persisted) disableAnimations();
        });

        window.addEventListener('popstate', disableAnimations);

        $(document).on('pjax:end.nav', enableAnimations);
    }

    $(document).ready(function() {
        initBackDetection();
    });
})(jQuery);

在 CSS 中为 no-uk-animation 添加控制规则：

根据你自己的来，只需要选中有异常动画的元素即可。

.no-uk-animation .uk-scrollspy-inview,
.no-uk-animation .pix-card-link{
    opacity: 1!important;
    animation: none !important;
    transition: none !important;
}

使用效果

• 首次加载页面 → 动画正常播放
• 浏览器返回页面 → 动画被禁用 → 页面显示静态内容，无闪烁
• 用户点击任意链接跳转 → PJAX 新页面加载完成 → 动画恢复，按原有 Scrollspy delay 顺序播放

最后

因为恢复动画限制时，动画会被重新播放，所以只能在跳转新页面才恢复动画。试过其他很多办法，比如隐藏播放动画前静态内容那几帧，结果折腾了很久都实现不了。

思路仅供参考，可能不适用于你的网站。