Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove inline translateZ etc on transition end

See original GitHub issue

When the transition ends, how can I remove the inline style completely (not set it to 0)? Even translateZ(0) causes side effect I really don’t want (like position fixed not working on children)

Issue Analytics

State:
Created 3 years ago
Reactions:10
Comments:7

Top GitHub Comments

11reactions

isc30commented, Dec 16, 2021

I think documentation around this is necessary, I was having issue with position: fixed not working properly because a parent had a dangling transform: translateX(0px) when it should’ve been transform: none

@mattgperry

3reactions

Tamcommented, Apr 13, 2021

I’ve temporarily worked around this by removing the style attribute on animation complete:

const onAnimationComplete = () => {
    requestAnimationFrame(() => {
        const drawer = document.querySelector(`.${css.drawer}`);
        if (drawer) drawer.removeAttribute('style');
    });
};

(You should probably use a ref to the element instead of a querySelector, which was needed in my case)