javascript - 使用 Javascript 激发 CSS 动画

Question

我目前拥有它，因此当单击链接时我的标题会滑入。如何做到(当单击链接时)当前标题会在新标题滑入之前滑出？

这是我一直在使用的clicked事件。这可能很奇怪，我一直在添加不同的东西来尝试让它工作。

// list of sections.  the first section contains only the h1.
var sections = document.querySelectorAll("section");

function hideSections() {
  for (var i = 0; i < sections.length; i++) {
    sections[i].className = "hidden";
  }
}

// list of links in the nav.
var links = document.querySelector("nav").querySelectorAll("a");

// add listeners to those links
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", clicked);
}

function clicked(event) {
  var target = document.querySelector('h2');
  target.className = "slideout";

  event.preventDefault();
  hideSections();

  var current = event.target.hash;
  // "show" appropriate selection, based on id from link
  document.querySelector(current).className = "";

  // modify URL to reflect current location
  location.hash = current;

  target.addEventListener("animationend", newfile);

  function newfile() {
    target.removeEventListener("animationend", newfile);
  }
  target.addEventListener("animationstart", newfile);

}

// when page loads...
hideSections();

if (location.hash == "") {
  sections[0].className = "";
} else {
  document.querySelector(location.hash).className = "";
}

https://jsfiddle.net/yk7w2zt2/这是我的完整代码。

Answer 1

您需要延迟显示下一部分，直到 h2 滑出屏幕。请参阅 JSFiddle 使用 setTimeout():

https://jsfiddle.net/w9uypaae/