CSS＆JS divスライダ - 繰り返しクリック

Question

私はシンプルなCSSデザインを作成しました。矢のように見えるCSS divをクリックすると、別のデザインスライドがフレームにleft: -9999pxからあります。 私はそのdivを複数のクリックに敏感にする方法を理解していないようです。

これは私が意味するもの： Xのようなデザインを想像してみてください。 divをクリックすると、右からYが挿入されます。 XY。ユーザーがもう一度ボタンをクリックすると、Yがスライドアウトして、左に同じパスを続けます。私は、任意のフレームワーク/ライブラリをせずに、私はバニラのJSソリューションを探していますJSを学んでおりますので

topleft.addEventListener('click', function(){ 
    addLeft.classList.replace('out', 'slideLeft') 
    addRight.classList.replace('out', 'slideLeft') 
}) 

：私は、次のJSを持っています。 ありがとうございました

Answer 1

topleft.addEventListener('click', function(){ 
    if (addLeft.classList[1] == 'out'){ 
     addLeft.classList.replace('out', 'slideLeft') 
     addRight.classList.replace('out', 'slideLeft') 
    } else if (addLeft.classList[1] == 'slideLeft') { 
     addLeft.classList.replace('slideLeft', 'slideOut') 
     addRight.classList.replace('slideLeft', 'slideOut') 
     setTimeout(function(){ 
      addLeft.classList.replace('slideOut', 'out'), 
      addRight.classList.replace('slideOut', 'out') 
     }, 300) 
    } 
})