How to bypass the css transition effect, using JavaScript?

Question

I want to create a css transition and it is important, that I can "reset" the width of my "box" in advance, each time my function is called.

By just setting the width of the box to zero, the element shrinks with animation. But I want to reset without animation. So I created a class which disables and enables the effect before and after resetting. Unfortunately this doesn't work. I guess because JavaScript is asynchronous and it just flys over the width=0 command. I figured out, that if I interrupt the runtime with an alert before removing the "notransition" it works, but of course this is not a valid way.

I always wanted to have a solution for this async problem. I would be very happy for a explanation and solution for my attempt and maybe an even better solution for the resetting. Thank you!

function test() {

            var duration = 5;

            document.getElementById("box").classList.add('notransition');
            document.getElementById("box").style.width = 0 + "%"
            document.getElementById("box").classList.remove('notransition');

            //Fill progress bar
            document.getElementById("box").style.setProperty('transition-duration', duration + 's');
            document.getElementById("box").style.width = 100 + "%"

            setTimeout(function () {
                console.log("Progress finished")
            }, duration * 1000);

        }

    * {
        box-sizing: border-box;
    }

    html {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    body {
        margin: 0;
        width: 100%;
        padding: 20px;
    }

    #box {
        border: 1px solid red;
        height: 20px;
        width: 10%;
        background-color: rgba(219, 72, 72, 0.3);
        transition-property: width;
        transition-duration: 0s;
        transition-timing-function: linear;
    }

    .notransition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

<div id="box" onclick="test()"></div>

Louys Patrice Bessette · Accepted Answer · 2022-01-25 23:49:17Z

1

Using two classes to toggle between, specifically for the transition-delay property, it works quite fine. You also have to allow a small delay to have the with restored to 10% before the animation starts.

function test() {

  // "normal" transition delay is zero seconds
  let box = document.getElementById("box");
  box.style.width = "10%";

  // Allow a small delay (10ms) for the width to update on screen
  setTimeout(function() {

    // Change the transition delay and the width
    box.classList.remove('normal');
    box.classList.add('transitionning');
    box.style.width = "100%";

    // When completed, restore the "normal" transition delay
    setTimeout(function() {
      console.log("Progress finished")
      box.classList.remove('transitionning');
      box.classList.add('normal');
    }, 5000);
  }, 10)
}

* {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  padding: 20px;
}

#box {
  border: 1px solid red;
  height: 20px;
  width: 10%;
  background-color: rgba(219, 72, 72, 0.3);
  transition-property: width;
  transition-timing-function: linear;
}

.normal {
  transition-duration: 0s;
}

.transitionning {
  transition-duration: 5s;
}

<div id="box" class="normal" onclick="test()"></div>

answered Jan 25, 2022 at 23:49

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gear Over a year ago

Thank you, that works so far. But we are loosing 10ms of runtime, which can be critical in a different application. Isn't there something, like a Promise, which tells the programm when changing of the width is done?

Louys Patrice Bessette Over a year ago

I don't think so... By the way, did you try with 1ms?

gear Over a year ago

It also seems to works with 1ms, but isn't it kind of a random behaviour ? Does it depent on hardware/ browser/ operation system? 0ms didn't work for me.

gear Over a year ago

I have to correct myself. I did a couple of changes in the rest of my project which probably has changed the overall runtimes of the chain of functions and now 1ms isn't enough. It stopped working. If I increase the timeout to 10ms it works again. So we have a very unstable solution for the problem because it depends on serval other things around the function.

Louys Patrice Bessette Over a year ago

That is about the best you can do with DOM elements. But, for sure, there are other ways like animating a SVG with a GSAP timeline. That is someting else.

Collectives™ on Stack Overflow

How to bypass the css transition effect, using JavaScript?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related