javascript - How do I fix slow, clunky CSS transitions? - Stack Overflow

I apologize if this has already been asked. I'm having a hard time finding an answer on my own. My CSS transitions are not very smooth. I've noticed this is being a pattern for me. I'm trying to figure out how to fix that. Is it faster to add/remove a class? Is it the high res images I'm using? Would JQuery be faster? Here's the codepen

let sidePanelOpen = false;

let urls = [
    '',
    '',
    ''
];


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

I apologize if this has already been asked. I'm having a hard time finding an answer on my own. My CSS transitions are not very smooth. I've noticed this is being a pattern for me. I'm trying to figure out how to fix that. Is it faster to add/remove a class? Is it the high res images I'm using? Would JQuery be faster? Here's the codepen

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

let sidePanelOpen = false;

let urls = [
    'https://images.unsplash./photo-1498898733745-c8c6df58e4ba',
    'https://images.unsplash./photo-1499006619764-59e5b0c0e7ca',
    'https://images.unsplash./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();
});

• javascript
• css
• dom
• sass
• transition

Share Improve this question Follow edited Jul 6, 2017 at 21:59 Alireza 2,44733 gold badges2727 silver badges3535 bronze badges asked Jul 6, 2017 at 21:34 tyl-ertyl-er 9711 gold badge33 silver badges1212 bronze badges 2

• 1 See this: What is DOM reflow? – nicholaswmin Commented Jul 6, 2017 at 21:38
• 1 It's always faster to add and remove a class. And if I had to guess, the hi-res images you're resizing would be the most likely culprit -- try removing them entirely to see if you like the result. – Blazemonger Commented Jul 6, 2017 at 21:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Check out this article: Smooth as Butter: Achieving 60 FPS Animations with CSS3

In short, changing elements so that the browser has to re-calculate it's document flow is most likely causing your performance issues.