强制 JavaScript 完成动画，然后再进行下一步答案

【问题标题】：Force JavaScript to complete animation before moving to next step强制 JavaScript 完成动画，然后再进行下一步
【发布时间】：2018-08-30 22:37:33
【问题描述】：

我正在构建一个简单的旋转器，它可以为网站旋转三条建议。我希望它淡出/淡入并添加/删除类来做到这一点。在 JavaScript 调试器中，它运行良好，因为它有时间单步执行所有调用，但在实际执行中，它非常不稳定。我理解这样做是因为脚本只关心添加类，它不关心完成类中的转换，但我需要知道如何让脚本完全完成类中的转换。这是 JavaScript：

function rotateAdvice() {
  let nextAdvice;
  const currentAdviceCont = document.querySelector(".advice-show");
  const currentAdvice = currentAdviceCont.id.slice(-1);
  if (currentAdvice >= 2) {
    nextAdvice = document.getElementById("advice-0");
  } else {
    nextAdvice = "advice-"+(parseInt(currentAdvice) + 1);
    nextAdvice = document.getElementById(nextAdvice);
  }
  currentAdviceCont.classList.add("advice");
  currentAdviceCont.classList.remove("advice-show");
  currentAdviceCont.classList.add("no-display");
  nextAdvice.classList.remove("no-display");
  nextAdvice.classList.add("advice-show");
}
// called through this:
setInterval(rotateAdvice, 4000);

以下是三个 css 类：

.advice {
    opacity: 0;
    transition: 1s opacity;
}
.advice-show {
    opacity: 1;
    transition: 1s opacity;
}
.no-display {
    display: none;
    visibility: hidden;
}

【问题讨论】：

代替setInterval，为transitionend添加一个事件监听器，它在触发时调用rotate方法。
查看 JavaScript 事件 transitionEnd 以按顺序触发您的类。

标签： javascript css css-transitions

【解决方案1】：

您可以使用其transitionend 事件来获得更准确的切换。

堆栈sn-p

var box1 = document.querySelector(".box.nr1");
var box2 = document.querySelector(".box.nr2");

box1.addEventListener("transitionend", trans_ended, false);
box2.addEventListener("transitionend", trans_ended, false);
setTimeout(function() { box1.classList.add('trans') }, 10);

function trans_ended (e) {
  if (e.type == 'transitionend') {
    if (e.target == box1) {
      box1.classList.remove('trans');
      setTimeout(function() { box2.classList.add('trans') }, 10);
    } else if (e.target == box2) {
      box2.classList.remove('trans');
      setTimeout(function() { box1.classList.add('trans') }, 10);
    }
  }
}

.box {
  position: absolute;
  left: 1em;
  top: 1em;
  width: 5em;
  height: 5em;
  background-color: blue;
  opacity: 0;
  transition: opacity 2s;
}
.box.nr2 {
  background-color: red;
}
.box.trans {
  opacity: 1;
}

<div class="box nr1"></div>
<div class="box nr2"></div>

另一种选择是使用animation，用它可以做更多很酷的事情。

这是我的另一个答案，带有一个简单的示例：

Changing an HTML element's style in JavaScript with its CSS transition temporarily disabled isn't reliably functioning

【讨论】：

【解决方案2】：

我只是为 transitionend 使用了一个简单的事件侦听器，如下所示：

  currentAdviceCont.classList.add("advice");
  currentAdviceCont.classList.remove("advice-show");

  currentAdviceCont.addEventListener("transitionend", () => {
    currentAdviceCont.classList.add("no-display");
    nextAdvice.classList.remove("no-display");
    nextAdvice.classList.remove("advice");
    nextAdvice.classList.add("advice-show");});

}

【讨论】：