CSS transition when deleting a class

Question

I have a form that works like a settings page. When form elements are changed, they are marked as unsaved and have a different border color. When the shape is saved, they are marked as saved using a different border color.

I want the border to disappear gradually while maintaining shape.

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 the CSS3 transition to run when the saved class is deleted, then it may disappear and everything will be hard. I currently have to manually animate it (using the plugin, of course), but it looks volatile, and I would like to move the code in CSS3 to make it smoother.

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

CSS

Here is the related 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 this):

 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 do not agree with this user interaction scheme, but how our program leader wants it. Please do not suggest me to change the way I work. Thank!

Answer 1

CSS transitions work by defining two states for an object using CSS. In your case, you determine how the object looks when it has the class "saved" , and you determine how it looks when it does not have the class "saved" (this is the usual view). When you delete the "saved" class, it will switch to a different state according to the transition settings for an object without the "saved" class.

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

We could help more specifically if you included all the relevant CSS that you work with with the HTML you provided.

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

Answer 2

@ Jfriend00's answer helps me understand the animation technique to only remove a class (not add).

And the base class must have the transition property (for example, transition: 2s linear all; ). This allows animations when any other class is added or removed by this element. But to turn off the animation when adding another class (and only to remove the animation class) we need to add transition: none; in the second grade.

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 need to add a 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 the removal of the recently-updated class will be removed.

Answer 3

Basically configure your CSS as:

 element { border: 1px solid #fff; -webkit-transition: border .5s linear; -moz-transition: border .5s linear; } element .saved { border: 1px solid transparent; } 

Answer 4

In my case, I had a problem with opacity transition, so this is the fix:

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

Mouse input

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

Mouse off

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