CODEWITHSUNDEEP
javascriptcsstransition
gear
gear

Reputation: 421

How to bypass the css transition effect, using JavaScript?

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>

Upvotes: 0

Views: 192

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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>

Upvotes: 1

Related Questions