JavascriptをトリガーCSSアニメーション

Question

：幸運のゲームが、スピニングの代わりにハイライトを使用しての JSFiddle

.pie:nth-of-type(1):hover:AFTER, 
.pie:nth-of-type(1):hover:BEFORE { 
    background-color:yellow;  
    opacity: 0.5; 
} 

その基本的にホイール。

質問はどのようにして一定の時間内にスライスを強調表示するイベントをトリガーするJavaScriptを作成するのですか？また、私は各スライス間の移行速度が時間をかけて減速したいと思います。

Answer 1

は、それは非常に簡単です。

まず、すべてのパイにn-th-of-typeのすべてが必要なわけではありません。しかし、余分なクラス、例えば「アクティブ」が必要です。そうでなければJavaScriptでハイライトできません。

だから、あなたはCSSを.pieは次のようになります。

.pie.active:BEFORE, 
.pie:hover:AFTER, 
.pie:hover:BEFORE { 
    background-color: yellow; 
    opacity: 0.5; 
} 

次に、ここであなたは（onloadイベントで）必要なものないのコード例は次のとおりです。ここで

function highlight(el, delay) { 
    setTimeout(function() { 
    el.className += ' active'; //light it up 
    //un-highlight after delay: 
    setTimeout(function() { el.className = 'pie'; }, 200) 
    }, delay) 
} 


var divs = document.querySelectorAll('.pie'); 
for (var i = 0; i < divs.length; i++) { 
    highlight(divs[i], i*200); 
} 

はフィドルです： JSFiddle

これは、加算遷移によって少し滑らかにすることができます。上記のCSSにtransition: background-color 0.1s;を追加し、すべてのプログラム遅延を200msにする。

遅延を実装するには、遅延式を使用して再生する必要があります。 i*200はやや単純ですが、タイミングを変更するためのさまざまな数学関数を試してみることは楽しいものではありません。さらに、transition cssを変更することもできます。要素をプログラム的に変更することはCSSよりも優先されます。あなたは簡単にそれをかなり現実的にすることができます。

Answer 2

あなたがする必要がどのようなこのJSfiddle here

を見て、タイマーに基づいて、あなたのホバークラスを追加し、削除するいくつかのJavaScriptを持っています。以下 擬似コード：

if spinTime < desiredSpinTime 
    remove hover class from previous element 
    get next element 
    add hover class to next element 

    add time step to spinTime 
    get next time step 
    call this function again with a delay of the next time step