如何修复缓慢、笨拙的 CSS 过渡？

Posted 2023-02-21

【中文标题】如何修复缓慢、笨拙的 CSS 过渡？

【英文标题】：How do I fix slow, clunky CSS transitions?

【发布时间】：2017-12-11 01:42:32

【问题描述】：

如果有人问过这个问题，我深表歉意。我很难自己找到答案。我的 CSS 过渡不是很流畅。我注意到这正在成为我的模式。我试图弄清楚如何解决这个问题。添加/删除课程是否更快？是我使用的高分辨率图像吗？ JQuery 会更快吗？这是代码笔

https://codepen.io/tyl-er/pen/OgZmQg?editors=0010

let sidePanelOpen = false;

let urls = [
    'https://images.unsplash.com/photo-1498898733745-c8c6df58e4ba',
    'https://images.unsplash.com/photo-1499006619764-59e5b0c0e7ca',
    'https://images.unsplash.com/photo-1498503603722-8de8df0beb96'
];


function openNav() 
    document.getElementById("accordion").style.width = "60vw";
    document.getElementById("splash").style.width = "40vw";
    document.getElementById("splash").style.marginRight = "60vw";
    document.getElementById("splash").style.opacity = ".5";


function closeNav() 
    document.getElementById("accordion").style.width = "0";
    document.getElementById("splash").style.width = "100vw";
    document.getElementById("splash").style.marginRight = "0";
    document.getElementById("splash").style.opacity = "1";
    let item = urls[Math.floor(Math.random()*urls.length)];
    document.getElementById("splash").style.backgroundImage = "url(" + item + ")";


document.querySelector("#nav-toggle").addEventListener("click", function() 
    this.classList.toggle("active");
    sidePanelOpen = !sidePanelOpen;
    sidePanelOpen ? openNav() : closeNav();
);

【问题讨论】：

看这个：DOM reflow?是什么

添加和删除类总是更快。如果我不得不猜测，您正在调整大小的高分辨率图像可能是罪魁祸首 - 尝试完全删除它们，看看您是否喜欢结果。

【参考方案1】：

查看这篇文章：Smooth as Butter: Achieving 60 FPS Animations with CSS3

简而言之，更改元素以使浏览器必须重新计算其文档流最有可能导致您的性能问题。

【讨论】：

请考虑使这不仅仅是一个仅链接的答案。