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    lt input type  text  class  unsaved    gt  Not saved yet  border is yellow  lt input type  text  class  saved    gt    Saved  so the border is green  lt input type  text  class      gt         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

User · Answer

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');

User · Answer

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

User · Answer

Basically set up your css like   element     border  1px solid  fff          transition  border  5s linear     element saved     border  1px solid transparent

User · Answer

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    lt div class  issue  onclick  addClass    gt click me lt  div gt    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

[css] CSS transition when class removed

Examples related to css

Examples related to css-transitions