CSSアニメーションをJavascriptで呼び出す

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が画面からずれるまで、次のセクションの表示が遅れる必要があります。 参照JSFiddle setTimeout()を使用して：

https://jsfiddle.net/w9uypaae/