The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Animate removal of class

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #184772

    Hey guys, I have stumbled across something here that I cannot figure out. I am changing the background color of an element on hover, then changing it again when the parent element is clicked (toggling a class).

    I don’t want the hover to cause a transition, however I do want the on click to fire a transition. If I apply the transition to the element then the bg animates on hover, but if I only apply it to the added class then it only animates on addClass.

    I’ve probably explained it poorly, but I created a CodePen for it. Hover over the element, then click it a couple times to see what I am on about.

    If you can help me out, that would be wonderful. :)

    Thanks guys


    Obviously you can’t animate a class toggle…it’s a binary state thing.

    Rather than adding a new class to an existing one, perhaps try removing the original class and adding a different one.

    If you do the transitions right on each class I think that might be an option…but I confess I’m still struggling to wrap my head around what you are trying to do.


    I want to animate background-color on an element only when its parent has a class applied.

    The demo I have built is a super stripped down version. We are using Angulars ui-grid to create a table and an active class is applied to a row when it is clicked, but it’s the child ‘cells’ background that changes. I only want this to animate when the ‘cells’ parent has a class applied.



    Not sure you can do this easily with swapping classes and css transitions.

    More inclined to think of managing the whole thing through JQ.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.