Is there any way to do that without javascript or do I have to use JS to append/remove class from an object? Could you guys show me some live example? Right now I have something that works only on hover of the object:
.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;
}
Assuming this (from your CSS)...
<div class="clicker">[Your Content]</div>
<div class="circle">[Your Content]</div>
WITH PURE JAVASCRIPT:
<div class="clicker" onclick="this.nextElementSibling.classList.toggle('paused');">[Your Content]</div>
<div class="circle">[Your Content]</div>
WITH JQUERY:
$('.clicker').click(function(){
$(this).next('.circle').toggleClass('paused');
});
You haven't post your html, so the JavaScript/jQuery selectors I'm using are base on your CSS. For a more specific answer with the best selectors, you should show your html.
EDIT:
I've just realized that with this solution you could have a problem with your CSS, because .circle
styles prevails over .paused
, so the class is been toggled but the styles aren't changing. You can easily solve it adjusting your CSS...
.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;
}
I hope it helps
This is not possible in CSS, however if you are interested in a JavaScript example:
$(element).on('click', function () {
if ($(target).hasClass('paused'))
{
$(target).removeClass('paused');
}
else
{
$(target).addClass('paused');
}
});
Replace element
with the button or anchor that activates the class removal / addition. And replace target
with the element that should animate.
This solution requires jQuery.
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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
We are developing SPA with hash tag navigationSaw on another SPA sites there is hash tag URLs like http://example
Typescript (and now also ECMAScript 2017) gives you great asynchronous tools to use in the form of async/awaitHowever, working with Angular 4, I get the feeling that using Observables is preferred
I have an old solution that heavily uses ActiveXObject throughout the applicationThe problem is that it only works in IE (because of ActiveXObject presence)