在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();
});

我想把它换成香草JS。大部分循环可以保留，但是必须替换超时和回调。我想，因为我不需要IE9的支持，我可以用css3的过渡和添加类来做到这一点。这是我目前所看到的:

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

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

对于这个例子(为了简单起见)，替换

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>

---

Using transitionend:

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

这里我使用getComputedStyle属性来检查元素的opacity状态，如果它处于淡出状态，则更改文本并删除淡出类(或)否则，再次调用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>

或者(就像你注释的那样)，你也可以检查元素上存在的类，然后做出相应的决定。与我之前的方法相比，这似乎是一个更简单的方法。

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 (使用Emulation)中进行了测试。它应该也适用于最新版本的Mac上的Safari。对于Windows，我认为Safari版本在5.1就停止了。x，仍然只触发webkitTransitionEnd事件。为了满足这些浏览器的需求，可以使用这个SO线程中提到的方法。