我目前拥有它,因此当单击链接时我的标题会滑入。 如何做到(当单击链接时)当前标题会在新标题滑入之前滑出?
这是我一直在使用的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/ 这是我的完整代码。
最佳答案
您需要延迟显示下一部分,直到 h2 滑出屏幕。
请参阅 JSFiddle 使用 setTimeout()
:
关于javascript - 使用 Javascript 激发 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43079906/