Javascript 触发 CSS 打开模态时转换失败

Question

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

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>

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

这是什么原因造成的？

Answer 1

您可能需要添加 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>

Answer 2

有两个问题，首先您没有将转换放入第二个代码，但这可能是粘贴时的错误，第二个问题可能与浏览器呈现和 JavaScript 事件循环的工作方式有关。添加 setTimeout 以添加 class 到 bar 将触发转换。

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>

Javascript 触发 CSS 打开模态时转换失败

Javascript triggered CSS transition fails when opening modal

javascript

html

css

progress-bar

simplemodal