CODEWITHSUNDEEP
javascripthtmlcssprogress-barsimplemodal
Daan Seuntjens
Daan Seuntjens

Reputation: 960

Javascript triggered CSS transition fails when opening modal

I have this code for a dynamically generated progressbar:

function startProgress() {
  var elem = document.getElementById("myBar");
  elem.classList.add('active');
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: auto;
  max-width: 1%;
  height: 30px;
  background-color: #4CAF50;
  transition: all 10s;
}

#myBar.active {
  max-width: 100%;
  transition: all 10s;
}
<button onClick="startProgress();">Start Progress</button>
    <p>Processing..</p>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>

Now I want that progressbar in a modal that gets visible on a button click.

This is the new code:

function startProgress() {
  var modal = document.getElementById("myModal");
  modal.style.display = "block";

  var elem = document.getElementById("myBar");
  elem.classList.add('active');
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: auto;
  max-width: 1%;
  height: 30px;
  background-color: #4CAF50;
  transition: all 10s;
}

#myBar.active {
  max-width: 100%;
  transition: all 10s;
}
<button onClick="startProgress();">Start Progress</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Processing..</p>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>
  </div>
</div>

But suddenly my code for the progress bar doesn't work anymore. I've only added code and didn't change any of the code of the progress bar.

What is causing this?

Upvotes: 0

Views: 36

Answers (2)

jcubic
jcubic

Reputation: 66498

There are two issues, first you didn't put transition into second code, but that's probably mistake when pasting, and second is issue is probably with browser rendering and how JavaScript event loop works. Adding setTimeout to adding class to bar will trigger the transition.

function startProgress() {
  var modal = document.getElementById("myModal");
  modal.style.display = "block";
  setTimeout(() => {
   var elem = document.getElementById("myBar");
    elem.classList.add('active');
  }, 0);
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: auto;
  max-width: 1%;
  height: 30px;
  background-color: #4CAF50;
  transition: all 10s;
}

#myBar.active {
  max-width: 100%;
  transition: all 10s;
}
<button onClick="startProgress();">Start Progress</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Processing..</p>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>
  </div>
</div>

Upvotes: 1

shrys
shrys

Reputation: 5940

You may have to add setTimeout to delay showing popup so that the animations have some difference in exceuting:

function startProgress() {
  var modal = document.getElementById("myModal");
  modal.style.display = "block";
  setTimeout(function() {
    var elem = document.getElementById("myBar");
    elem.classList.add('active');
  });
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: auto;
  max-width: 1%;
  height: 30px;
  background-color: #4CAF50;
  transition: all 10s;
}

#myBar.active {
  max-width: 100%;
  transition: all 10s;
}
<button onClick="startProgress();">Start Progress</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Processing..</p>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions