Learn, Share, Build

296
September 27, 2017, at 4:49 PM

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;
}
Answer 1

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

Answer 2

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.

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>

Rent Charter Buses Company
READ ALSO
Learn, Share, Build

Learn, Share, Build

We are developing SPA with hash tag navigationSaw on another SPA sites there is hash tag URLs like http://example

282
Learn, Share, Build

Learn, Share, Build

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

278
Learn, Share, Build

Learn, Share, Build

I try to use Liferay validator with javascript on Liferay 62

291
Learn, Share, Build

Learn, Share, Build

I have an old solution that heavily uses ActiveXObject throughout the applicationThe problem is that it only works in IE (because of ActiveXObject presence)

259