CSS 애니메이션과 자바 스크립트 사용하기

Question

현재 링크를 클릭하면 내 제목이 슬라이드되도록합니다. 링크를 클릭하면 새 제목이 들어가기 전에 현재 제목이 슬라이드 아웃되도록하려면 어떻게해야합니까?

이것은 내가 사용하고있는 클릭 이벤트입니다. 그것은 모두 어색 할 수도 있습니다, 나는 그것을 시도하고 작동하도록 다른 것들을 추가했습니다.

// 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가 화면에서 벗어날 때까지 다음 섹션을 표시하는 것을 지연시켜야합니다. setTimeout()를 사용 참조 JSFiddle :

https://jsfiddle.net/w9uypaae/