CSS transition when class removed

Question

I have a form that functions as a settings page. When form elements are modified, they are marked as unsaved and have a different border color. When the form is saved, they are marked as saved by having another border color.

What I want is that when the form is saved, the border will gradually fade out.

The order will go:

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

If I can get a CSS3 transition to fire when the class saved is removed, then it could fade out and everything would be hunky-dory. Currently, I have to manually animate it (using a plug-in, of course), but it looks choppy, and I would like to move the code to CSS3 so it will be smoother.

I only need this to work in Chrome and Firefox 4+, though others would be nice.

CSS:

Here's the associated CSS:

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

I would like to work in the following transition (or something like it):

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

Note:

Personally, I don't agree with this scheme of user interaction, but that's how our software lead wants it. Please don't suggest that I change the way it functions currently. Thanks!

score 80 · Accepted Answer · answered Mar 01 '12 at 00:44

80

CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "saved" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "saved", it will transition to the other state according to the transition settings in place for the object without the "saved" class.

If the CSS transition settings apply to the object (without the "saved" class), then they will apply to both transitions.

We could help more specifically if you included all relevant CSS you're using to with the HTML you've provided.

My guess from looking at your HTML is that your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.

answered Mar 01 '12 at 00:44

jfriend00

683,504
96
985
979

I added my CSS as it currently stands, and added the transition that I would like. I'm not sure if adding a '.fade' class would work, because it would already have the other settings from 'saved'. I'll try that though, and see if I can get it to work. Thanks! – beatgammit Mar 01 '12 at 01:26
1

@tjameson - you need a class on the object that identifies it in the state after `.saved` is removed. As it is, you have no transitions defined for that state (which is why you get none). Also, you haven't included any CSS that actually defines a meaningful transition. You've listed some transitions, but not shown what classes they are attached to and that is the key. This would work best if you put it in a jsFiddle so we can both more easily play with it there and we can actually see what does and doesn't work. – jfriend00 Mar 01 '12 at 01:35
1

Note that not including a transition on the base class can cause IE to not revert to the original properties properly. (i.e. if you're animating opacity and the class doing the animating the opacity will hang, rather than revert [https://jsfiddle.net/z3txjbaj/6/ ], adding a transition on the base class fixes this https://jsfiddle.net/z3txjbaj/9/). Note that both of these demos work just find in Chrome and FF, it's just IE that seems to have this issue. – Hanna Jul 25 '16 at 22:18
Good point @Hanna So if I want an animation ONLY to happen on class adding BUT NOT on class removing what would be the approach? Set the transition in the added class could be buggy so I guess I would have to add another css property like visibility or add transition: none to the always present class, right? ```element { border: 1px solid #fff; transition: none; } element.saved { border: 1px solid transparent; transition: border .5s linear; }``` – Watchmaker Aug 03 '21 at 08:33

score 43 · Answer 2 · answered Feb 15 '16 at 18:51

The @jfriend00's answer helps me to understand the technique to animate only remove class (not add).

A "base" class should have transition property (like transition: 2s linear all;). This enables animations when any other class is added or removed on this element. But to disable animation when other class is added (and only animate class removing) we need to add transition: none; to the second class.

Example

CSS:

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML:

<div class="issue" onclick="addClass()">click me</div>

JS (only needed to add class):

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

plunker of this example.

With this code only removing of recently-updated class will be animated.

This is what I can a great answer! A short but precise explanation, with a simple but thorough code example, a link to a working plunker. Could not ask for more! — FireAphis, Jul 10 '16 at 07:45

score 16 · Answer 3 · edited Jul 26 '18 at 08:39

16

Basically set up your css like:

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}

edited Jul 26 '18 at 08:39

Bram Vanroy

27,032
24
137
239

answered Mar 01 '12 at 01:25

Ken Wheeler

1,938
12
12

score 4 · Answer 4 · answered Aug 08 '14 at 09:40

In my case i had some problem with opacity transition so this one fix it:

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

Mouse Enter

$('#dropdown').removeClass('ns').addClass('fade');

Mouse Leave

$('#dropdown').addClass('ns').removeClass('fade');

CSS transition when class removed

4 Answers4

Linked