は、動的にJSを使用して次のことを実行する方法を、基本的に

Question

を要素2する要素1からCSSのチルダを追加

.go:checked ~ .road { 
 
    -webkit-animation: move-road 6s 1 1.3s ease-in-out forwards, 
 
        rotate-road 1s forwards; 
 
}

（出所）：http://blog.teamtreehouse.com/triggering-css-animations-with-sibling-selectors

これはJSドリブルですか？

Answer 1

このコードのコンテキストは、プラグインを使用しないカルーセルに関連しています。質問はスライダーについてではなかったが、私はちょうど私が代わりに上記の私の要件に照らして、以下でそれ簡単にすることを試みた方法を説明するつもりです：次のクラスである

e.addEventListener('click', function(evt) { 
 
    // e is individual buttons on the slider div 
 
    let that = this; 
 
    // id = evt.target.hash; 
 
    id = that.href; 
 
    // console.log(id); 
 
    num = parseInt(id[id.length - 1]) * -800; 
 
    slider.style.left = `${num}px`; 
 
});

スライダーそれが重要CSS側、：私はスライダーの1つのフレーム内に表示し、提示可能な幅を設定し、合計のdivフレームを計算

.div-img-holder 
    width: 2400px; 
    height: 400px; 
    clear: both; 
    position: relative; 

    -webkit-transition: left 1s; 
    -moz-transition: left 1s; 
    -o-transition: left 1s; 
    transition: left 1s; 

1. 。
2. スライダ幅をここでは最大幅として作成しました。
3. クリックするたびに、スライダーが一定の位置だけ左に移動します。トランジションは滑らかな左の動きを処理します。

cssにトランジションと疑似cssを入れてください。