スライドする要素の行をどのように動的にアニメーション化しますか？

Question

私は現在、自分のページに表示されている5つの要素の行を持っています。それぞれの要素には画像が含まれています。目標の1つがクリックされると、それは左にスライドし、その情報が表示され、他の4つはフェードアウトします。要素が再びクリックされると、右にスライドし、他の画像はフェードインします。現在のところ、スライディングを動作させようとしていますが、イメージを取得する方法を理解していません移動後の正しい位置。その後、私はそれはので、この意志は明らかにハードコードごと

document.querySelector(".image").style.animation = "move 1s"; 
document.querySelector(".image").style.left = "-100px"; 

として設定した別のJS機能に

@keyframes move { 
     from { 
      left: 0; 
     } 
     to { 
      left: -100px; 
     } 
    } 

    div.image{ 
     position: relative; 
     display: block; 
    } 

：私はスタイルのようなものに設定されている各要素の現在

画像を約100px以上移動することができますが、アイコンの下には100pxの行が表示されていても十分に遠くないことは明らかです。この距離をよりダイナミックにする方法はありますか？

Answer 1

CSSトランジションを試しましたか？あなたはこのような何かを行うことができます。

#yourID { 
    transition: all 1s; 
} 

は、次に、あなたのJSであなたのonclickイベントを設定することができます。次に、左の間、右のように切り替えるためのフラグを設定することができ

var element = document.getElementById('yourID'); 
element.onclick = function(){ 
    element.style.left = '10%'; 
} 

：

var toggled = false; 
var element = document.getElementById('yourID'); 
element.onclick = function(){ 
    if(toggled === false) 
    { 
    element.style.left = '10%'; 
    } else { 
    //return to original position 
    element.style.(however you choose to style) = yourDefaultPosition; 
    } 
}