Animate.CSS - Remove class after end of animation with vanilla JavaScript

Question

I want to make a button so whenever I click it the animation plays. But the problem that I have is when I click the button, the animation doesn't play because the class is already applied. I want to know how to remove the class when the animation is done. I know this can be done with jQuery, but I want to know how to do it with just regular vanilla JavaScript.

refer this question: http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery — hulkinBrain, Aug 22 '16 at 17:55
Possible duplicate of [Callback on CSS transition](http://stackoverflow.com/questions/2087510/callback-on-css-transition) — Heretic Monkey, Aug 22 '16 at 18:02
I'm assuming here you're talking about a CSS-based animation, since it's not terribly clear in your question. — Heretic Monkey, Aug 22 '16 at 18:03
I've added some ways on removing classes and the link for more info, I dont think i've really answered your question however, what do you want to do with CSS? Can you add a small example via JFiddle so we can see what you are talking about — Muntasir Alam, Aug 22 '16 at 18:06

score 1 · Answer 1 · edited May 23 '17 at 12:09

1

Another approach is

ELEMENT.classList.remove("CLASS_NAME");

Versus

document.getElementById("whatever").className = "";

Which removes all classes, not a class

Or perhaps this

div.classList.add("foo");
div.classList.remove("foo");

See more from Remove Class

edited May 23 '17 at 12:09

Community

1
1

answered Aug 22 '16 at 18:03

Muntasir Alam

1,777
2
17
26

Mystical · Answer 2 · 2016-08-22T18:17:10.893

0

Try this:

var btn = document.getElementsByClassName("yourBTNClass")[0]; // Your (N-1)th button
btn.onclick = function() {
   btn.className = "yourBTNClass"; // Setting the class back to what it was before
   animation(); // The function your animation takes place in
   btn.className = ""; // Reseting the class
}

Hope you found this useful! :)

edited Aug 22 '16 at 18:17

answered Aug 22 '16 at 18:00

Mystical

2,505
2
24
43

Caleb Thornton · Answer 3 · 2016-08-22T18:33:59.170

If I understand the question correctly, it sounds like you want to know how to modify the class of a particular element with javascript (not jQuery).

This is how I would do it:

document.getElementById("elementId").className = "";

Hope that helps!

EDIT 1

So it sounds like you want the class to be removed automatically once the event has finished, rather than some external action removing the class.

I think the best way to go would be to create your own eventListener function for animation like jQuery has. Here is a good example that I found:

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
    console.log('Transition complete!  This is the callback, no library needed!');
});

Source: https://davidwalsh.name/css-animation-callback

That doesn't work, I want the animation to end before it removes the class. — , Aug 22 '16 at 18:07

Animate.CSS - Remove class after end of animation with vanilla JavaScript

3 Answers3