Chaque fois que je modifie l'onglet de mon navigateur, l'animation de mise au point se répète. Je veux empêcher cela. Y'a-t'il un quelconque moyen d'y arriver? Merci pour toute aide.Répétition de l'animation CSS Focus
est ici la démo: http://output.jsbin.com/vidapu
<div id="box" tabindex="0">
Click me...
<div id="box-dropdown">...and now switch your browser tab</div>
Lorsque vous modifiez les onglets, vous n'êtes plus "concentré" sur cet élément. Lorsque vous revenez, l'état du focus est restauré. La seule façon d'empêcher ce comportement est de déclencher l'animation sur autre chose que le focus. Si vous souhaitez qu'il soit déclenché lors d'un clic, vous devez utiliser un événement de clic JavaScript.
Initialement défini display: none; sur la zone animée, puis modifiez-le sur display: block; lorsque vous cliquez sur le bouton.
Le problème est, que je veux éviter le JavaScript, mais merci pour l'aide de toute façon! – Hvrxld
Y a-t-il une raison pour laquelle vous voulez éviter JavaScript? Il existe pour une raison :) –
La mise au point est en cours de restauration lorsque vous changez les onglets, d'où la lecture de l'animation à nouveau. Si vous voulez afficher une autre case après avoir cliqué sur la première, ajoutez simplement l'événement onClick dans la première case et supprimez la classe 'hidden' de la boîte cachée par défaut. –
Je vais essayer, applaudissements. – Hvrxld