Javascript 如何修复缓慢、笨拙的CSS转换？

如果已经有人问过，我道歉。我自己很难找到答案。我的CSS转换不是很平滑。我注意到这正成为我的一种模式。我正在想办法解决这个问题。添加/删除类是否更快？我使用的是高分辨率图像吗？JQuery会更快吗？这是密码笔

查看本文：

---

简而言之，更改元素以便浏览器必须重新计算其文档流很可能会导致性能问题。

请参见：添加和删除类总是更快。如果我必须猜测，你调整大小的高分辨率图像将是最有可能的罪魁祸首——试着完全移除它们，看看你是否喜欢这个结果。

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