1

我已经习惯了使用 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();
});

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

4

1 回答 1

2

您已经完成了几乎所有正确的操作，删除了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>

使用 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 线程中提到的方法。

于 2015-09-06T12:41:32.530 回答