打开模式时Javascript触发的CSS转换失败答案

【问题标题】：Javascript triggered CSS transition fails when opening modal打开模式时Javascript触发的CSS转换失败
【发布时间】：2019-09-10 11:29:02
【问题描述】：

我有这个动态生成进度条的代码：

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>

现在我想要一个模式中的进度条，在单击按钮时可见。

这是新代码：

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>

但是突然我的进度条代码不再工作了。我只添加了代码，没有更改进度条的任何代码。

这是什么原因造成的？

【问题讨论】：

第二个代码没有过渡。
@jcubic 忘了在这个例子中添加它，我已经更新了我的问题，仍然不起作用......

标签： javascript html css progress-bar simplemodal

【解决方案1】：

有两个问题，首先您没有将转换放入第二个代码，但粘贴时可能是错误的，其次是浏览器渲染和 JavaScript 事件循环如何工作的问题。将 setTimeout 添加到向栏添加类将触发过渡。

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>

【讨论】：

@shrys 我比较慢，因为我在写解释。

【解决方案2】：

您可能需要添加setTimeout来延迟显示弹出窗口，以便动画在执行上有所不同：

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>

【讨论】：