如何修復緩慢，笨重的CSS轉換？

Question

如果已經詢問，我表示歉意。我很難自己找到答案。我的CSS轉換不是很順利。我注意到這正成爲我的一種模式。我試圖找出如何解決這個問題。添加/刪除課程是否更快？這是我使用的高分辨率圖像嗎？ JQuery會更快嗎？這裏的codepen

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(); 
}); 

Answer 1

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

總之，變化的元素使瀏覽器必須重新計算是最有可能導致您的性能問題，它的文檔流程。