Animate removal of class

[alexmccabe]

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

[Paulie_D]

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.

[alexmccabe]

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.

[Paulie_D]

Hmmm.

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

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

[Author]

Posts