在 JavaScript 循环中等待 transitionend

Question

我已经习惯了使用 jQuery，以至于我似乎无法弄清楚如何在 Javascript 中做到这一点。我不想使用 jQuery，因为这是我在该网站上使用的唯一片段，而且库太大只能用于此目的。

这是 jQuery 脚本（有效）：http://jsfiddle.net/1jt6dhzu/2/

$(document).ready(function () {
    var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
    var j, i = 4,
        n = whatAmI.length;

    function changeSubTitle() {
        setTimeout(function () {
            j = Math.floor(Math.random() * n - 1);
            if (j >= i) j += 1;

            $(".page-header > h2").animate({
                "opacity": 0
            }, 700, function () {
                $(this).children("span").text(whatAmI[j]);
                $(this).animate({
                    "opacity": 1
                }, 700, changeSubTitle);
            });
        }, 1000);
        i = j;
    }
    changeSubTitle();
});

我想将它换成 vanilla JS。大部分循环可以保留，但是必须更换超时和回调。我认为因为我不需要 IE9 支持，所以我可以使用 css3 转换并添加类来做到这一点。 This is what I have so far:

h2 {
    opacity: 1;
    transition: opacity 700ms;
}
h2.fade-out {
    opacity: 0;
}


document.addEventListener("DOMContentLoaded", function () {
    var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
    var j, i = 4,
        n = whatAmI.length,
        heading = document.querySelector(".page-header > h2");

    function changeSubTitle() {
        setTimeout(function () {
            j = Math.floor(Math.random() * n - 1);
            if (j >= i) j += 1;

            heading.classList.add("fade-out");

            setTimeout(function () {
                heading.children("span")[0].innerHTML = whatAmI[j];
                heading.classList.remove("fade-out");
                setTimeout(changeSubTitle, 700);
            }, 700);
        }, 1000);
        i = j;
    }
    changeSubTitle();
});

不幸的是，这不起作用。为 transitionend 上的事件换掉超时（除了最外层的超时）可能会更好。但是我不确定如何实现这个跨浏览器（IE 10 及更高版本，以及其他主要浏览器）。

Answer 1

除了删除以 jQuery 特定方式实现的 children 方法外，您几乎完成了所有正确的事情。与我之前发布的相反，JS 确实有一个 children 函数并且它 returns 一个 HTMLCollection 但它不能通过提供类型作为参数来基于元素类型进行过滤。它 returns 所有子节点，我们必须通过使用子元素的索引或检查元素的类型来选择正确的节点。

对于这个例子（为了简单起见），替换

heading.children("span")[0].innerHTML = whatAmI[j];

与

heading.children[0].innerHTML = whatAmI[j]; // since span is the first and only child

或

heading.querySelector("span").innerHTML = whatAmI[j];

它应该按预期工作。

document.addEventListener("DOMContentLoaded", function() {
  var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
  var j, i = 2,
    n = whatAmI.length,
    heading = document.querySelector(".page-header > h2");

  function changeSubTitle() {
    setTimeout(function() {
      j = Math.floor(Math.random() * (n - 1));
      if (j >= i) j += 1;

      heading.classList.add("fade-out");

      setTimeout(function() {
        heading.querySelector("span").innerHTML = whatAmI[j];
        heading.classList.remove("fade-out");
        setTimeout(changeSubTitle, 700);
      }, 700);
      i = j;
    }, 1000);
  }
  changeSubTitle();
});

h2 {
  opacity: 1;
  transition: opacity 700ms;
}
h2.fade-out {
  opacity: 0;
}

<header class="page-header">
  <h1>Bananas</h1>

  <h2><span>A phone</span></h2>

</header>

使用 transitionend:

transitionend 是一个单一的事件监听器，只要元素属性的转换结束，它就会被附加并触发。它会在添加和删除淡出类之后被触发，因此，我们必须手动检查触发事件时元素的状态，然后根据它采取行动。

这里我使用了 getComputedStyle 属性来检查元素的 opacity 状态，如果它处于淡出状态，则更改文本并删除淡出 class （或）否则，再次调用 changeSubTitle 函数。

if (window.getComputedStyle(heading).opacity == 0) {
  heading.querySelector("span").innerHTML = whatAmI[j];
  heading.classList.remove("fade-out");
} else
  changeSubTitle();

document.addEventListener("DOMContentLoaded", function() {
  var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
  var j, i = 2,
    n = whatAmI.length,
    heading = document.querySelector(".page-header > h2");

  function changeSubTitle() {
    setTimeout(function() {
      j = Math.floor(Math.random() * (n - 1));
      if (j >= i) j += 1;

      heading.classList.add("fade-out");
      i = j;
    }, 1000);
  }
  heading.addEventListener('transitionend', function() {
    if (window.getComputedStyle(heading).opacity == 0) {
      heading.querySelector("span").innerHTML = whatAmI[j];
      heading.classList.remove("fade-out");
    } else
      changeSubTitle();
  });
  changeSubTitle();
});

h2 {
  opacity: 1;
  transition: opacity 700ms;
}
h2.fade-out {
  opacity: 0;
}

<header class="page-header">
  <h1>Bananas</h1>

  <h2><span>A phone</span></h2>

</header>

或者（就像您评论的那样），您也可以检查元素上存在的 class，然后做出相应的决定。与我之前的方法相比，这似乎是一种更简单的方法。

if (heading.classList.contains("fade-out")) {
  heading.querySelector("span").innerHTML = whatAmI[j];
  heading.classList.remove("fade-out");
} else
  changeSubTitle();

document.addEventListener("DOMContentLoaded", function() {
  var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
  var j, i = 2,
    n = whatAmI.length,
    heading = document.querySelector(".page-header > h2");

  function changeSubTitle() {
    setTimeout(function() {
      j = Math.floor(Math.random() * (n - 1));
      if (j >= i) j += 1;

      heading.classList.add("fade-out");
      i = j;
    }, 1000);
  }
  heading.addEventListener('transitionend', function() {
    if (heading.classList.contains("fade-out")) {
      heading.querySelector("span").innerHTML = whatAmI[j];
      heading.classList.remove("fade-out");
    } else
      changeSubTitle();
  });
  changeSubTitle();
});

h2 {
  opacity: 1;
  transition: opacity 700ms;
}
h2.fade-out {
  opacity: 0;
}

<header class="page-header">
  <h1>Bananas</h1>

  <h2><span>A phone</span></h2>

</header>

以上两个片段都已在最新版本的 Firefox、Chrome、Opera、IE11 和 IE10（使用仿真）中进行了测试。它也应该在 Mac 上的最新版本的 Safari 中工作。对于 Windows，我认为 Safari 版本以 5.1.x 停止并且仍然只触发 webkitTransitionEnd 事件。为了迎合这些浏览器，可以使用this SO thread中提到的方法。

在 JavaScript 循环中等待 transitionend

Waiting for transitionend in a loop with JavaScript

javascript

css

transition

transitionend