ブラウザタブを変更するたびに、フォーカスアニメーションが繰り返されます。私はこれを防止したい。それを行う方法はありますか？助けてくれてありがとう。CSSフォーカスアニメーションが繰り返されます
はここでデモません：http://output.jsbin.com/vidapu
<div id="box" tabindex="0">
Click me...
<div id="box-dropdown">...and now switch your browser tab</div>
あなたは、タブを変更すると、あなたは、もはやその要素の "集中" しています。元に戻すと、フォーカス状態に戻ります。この動作を防止する唯一の方法は、フォーカス以外のものでアニメーションをトリガーすることです。 クリック時にトリガーされるようにするには、JavaScriptクリックイベントを使用する必要があります。
最初にアニメーションボックスにdisplay: none;を設定し、ボタンをクリックするとdisplay: block;に変更されます。
問題はJavaScriptを避けたいが、とにかく助けてくれてありがとう！ – Hvrxld
JavaScriptを避けたい理由はありますか？それは理由のために存在する:) –
タブを切り替えるとフォーカスが復元され、アニメーションが再び再生されます。最初のボックスをクリックした後に別のボックスを表示したい場合は、最初のボックスにonClickイベントを追加し、デフォルトで隠しボックスから 'hidden'クラスを削除してください。 –
私はそれを試してみます、歓声。 – Hvrxld