CSS-Animationen, starten und stoppen unendlich Animation auf Klick

Question

Gibt es eine Möglichkeit, das ohne Javascript oder muss ich JS verwenden, um Klasse an ein Objekt anhängen/entfernen? Könnt ihr mir ein Live-Beispiel zeigen? Im Moment habe ich etwas, das nur auf schweben des Objekts funktioniert:

.clicker:hover + .circle { 
    -webkit-animation: rotor 1.5s linear 0s infinite normal; 
    -mox-animation: rotor 1.5s linear 0s infinite normal; 
    -o-animation: rotor 1.5s linear 0s infinite normal; 
    animation: rotor 1.5s linear 0s infinite normal; 
    } 

    .paused{ 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    animation-play-state:paused; 
} 

Answer 1

dies Angenommen (von Ihrem CSS) ...

<div class="clicker">[Your Content]</div> 
<div class="circle">[Your Content]</div> 

MIT PURER javascript:

<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div> 
<div class="circle">[Your Content]</div> 

MIT JQUERY:

$('.clicker').click(function(){ 
    $(this).next('.circle').toggleClass('paused'); 
}); 

Sie haben nicht poste dein html, also das JavaScript/jQuery s Wähler, die ich benutze, basieren auf deinem CSS. Für eine spezifischere Antwort mit den besten Selektoren sollten Sie Ihren HTML-Code anzeigen.

EDIT:

ich, dass Sie ein Problem mit dieser Lösung nur realisiert haben mit Ihrem CSS haben könnte, weil .circle Stile über .paused herrscht, so dass die Klasse umgeschaltet wird, aber die Stile sind nicht zu ändern . Sie können es leicht lösen Ihre CSS-Anpassung ...

.clicker + .circle { 
    -webkit-animation: rotor 1.5s linear 0s infinite normal; 
    -mox-animation: rotor 1.5s linear 0s infinite normal; 
    -o-animation: rotor 1.5s linear 0s infinite normal; 
    animation: rotor 1.5s linear 0s infinite normal; 
} 

.paused { 
    -webkit-animation-play-state: paused !important; 
    -moz-animation-play-state: paused !important; 
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important; 
} 

Ich hoffe, es

Answer 2

Dies ist nicht möglich, in CSS ist, aber wenn Sie in einem JavaScript-Beispiel Interesse:

$(element).on('click', function() { 

    if ($(target).hasClass('paused')) 
    { 
     $(target).removeClass('paused'); 
    } 

    else 
    { 
     $(target).addClass('paused'); 
    } 

}); 

mit dem Ersetzen element Knopf oder Anker, der die Klassenentfernung/-addition aktiviert. Und ersetzen Sie target durch das Element, das animiert werden soll.

Diese Lösung erfordert jQuery.

Answer 3

var active = document.querySelector('.active'); 
 
var div = document.querySelector('.wrap'); 
 
var hasAnimationPaused = false; 
 
var aniamtionPausedClass = 'paused' 
 

 
div.className += ' circle'; 
 
active.addEventListener('click', function(e) { 
 
    var classNames = div.className.split(' '); 
 
    if (!hasAnimationPaused) { 
 
    div.className += ' ' + aniamtionPausedClass; 
 
    hasAnimationPaused = true; 
 
    } else { 
 
    classNames.splice(classNames.indexOf(aniamtionPausedClass), 1); 
 

 
    div.className = classNames.join(' '); 
 
    hasAnimationPaused = false; 
 
    } 
 
})

.wrap { 
 
    color: black; 
 
} 
 
@keyframes rotor { 
 
from { 
 
    color: red; 
 
} 
 
50% { 
 
    color: yellow; 
 
} 
 
to { 
 
    color: blue; 
 
} 
 
} 
 
.circle { 
 
    -webkit-animation: rotor 1.5s linear 0s infinite normal; 
 
    -mox-animation: rotor 1.5s linear 0s infinite normal; 
 
    -o-animation: rotor 1.5s linear 0s infinite normal; 
 
    animation: rotor 1.5s linear 0s infinite normal; 
 
    } 
 
    .paused{ 
 
    -webkit-animation-play-state:paused; 
 
    -moz-animation-play-state:paused; 
 
    -o-animation-play-state:paused; 
 
    animation-play-state:paused; 
 
}

<div class="wrap"> TEst Test</div> 
 
<button class="active">CLick</button>