Wie behebe ich langsame, klobige CSS-Übergänge?

Question

Ich entschuldige mich, wenn dies bereits gefragt wurde. Es fällt mir schwer, selbst eine Antwort zu finden. Meine CSS-Übergänge sind nicht sehr glatt. Ich habe bemerkt, dass dies ein Muster für mich wird. Ich versuche herauszufinden, wie ich das beheben kann. Ist es schneller eine Klasse hinzuzufügen/zu entfernen? Sind es die hochauflösenden Bilder, die ich benutze? Würde JQuery schneller sein? Hier ist die 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

Schauen Sie sich diesen Artikel: Smooth as Butter: Achieving 60 FPS Animations with CSS3

Kurz gesagt, wechselnden Elemente, so dass der Browser des Dokumentenfluss hat neu zu berechnen, wird höchstwahrscheinlich Ihre Leistungsprobleme verursachen.