Supprimer animation

Par Benjamin Derepas, il y a 10 ans

Javascript

Bonjour la communauté, je viens vous voir car je galère un peu avec les animations css.
J'ai un lecteur audio très simple sur une page , avec simplement une visualisation audio.
(cf : pour le moment c'est le loader créer via le tuto de grafikart avec les bars qui up/down et fade in/out)

En gros la musique se joue : l'animation est présente, mais lorsque je click sur le bouton mute, je voudrai que l'animation s'arrête et inversement.
Voici mon code :

<div id="audio-control"> <span id="mute" class="mute loader loader-bars"><span></span></span> </div> .loader-bars:before, .loader-bars:after, .loader-bars span { content: ''; display: block; position: absolute; left: 0px; top: 0; width: 3px; height: 20px; background-color: #FFF; -webkit-animation: grow 1s linear infinite; -moz-animation: grow 1s linear infinite; animation: grow 1s linear infinite; } .loader-bars:after { left: 5px; -webkit-animation-delay: -0.66s; -moz-animation-delay: -0.66s; animation-delay: -0.66s; } .loader-bars span { left: 10px; -webkit-animation-delay: -0.33s; -moz-animation-delay: -0.33s; animation-delay: -0.33s; } @-webkit-keyframes grow { 0% { -webkit-transform: scaleY(0); opacity: 0; } 50% { -webkit-transform: scaleY(1); opacity: 1; } 100% { -webkit-transform: scaleY(0); opacity: 0; } }

Et coté JS :

var mute = $("#mute"); var audio = new Audio('intro.mp3'); audio.autoplay=true; mute.click(function(){ if(audio.muted == false) { audio.muted=true; } else if(audio.muted == true) { audio.muted=false; } });

Comment dire lorsque audio.muted=true au js d'enlever l'animation ? J'ai essayé avec une classe clear-anim (animation:none) etc, même avec la methode removePropirety('animation') mais rien n'y fait ...

Auriez vous une idée ?

2 réponses

Grafikart, il y a 10 ans

Et si tu modifie l'animation duration en JS ça ne marcherais pas ?

Benjamin Derepas, il y a 10 ans

Le problème viens du fait que les éléments soient crées avec :before et :after et d'après ce que j'ai lu, il est impossible de les selectioner en jquery, conciderant qu'ils ne font pas partit du DOM.

sources