CSS/JS disable animation

Asked Feb 26 '18 at 15:56

Active Feb 26 '18 at 17:59

Viewed 486 times

How can I enable/disable an animation from inline CSS

.loading-bar {
  display: inline-block;
  margin-left: 5px;
  width: 4px;
  height: 16px;
  border-radius: 4px;
  /* transform: rotate(0deg) skew(15deg); */
  /* -webkit-transform: rotate(0deg) skew(15deg); */
  /* animation: loading 1s ease-in-out infinite; */
}

Actually, I came up with this function which works, but rely on CSS index that I had to put it 0 for using document.styleSheets[0].rules

function ani(x) {
  var el;
  if (document.styleSheets[0].rules)
    el = document.styleSheets[0].rules[0];
  else if (document.styleSheets[0].cssRules)
    el = document.styleSheets[0].cssRules[0];
  el.style.animation = (x ? 'loading 1s ease-in-out infinite' : '');
}

There is a more elegant way? Thank you.

edited Feb 26 '18 at 17:59

Ashfaqur_Rahman

asked Feb 26 '18 at 15:56

yo3hcv

1,531
2
17
27

4

Use a class which fires just the animation and toggle the class via js `.classList.toggle()` – Fabrizio Calderan Feb 26 '18 at 15:57
Use `classList.add`, `classList.remove` or `classList.toggle` to wrap between the classes https://stackoverflow.com/a/196038/4730201 – Ricardo Pontual Feb 26 '18 at 15:59
read this: https://alligator.io/js/classlist/ – Joe RR Feb 26 '18 at 18:04

CSS/JS disable animation

0 Answers0