类删除时的CSS过渡

我有一个可用作设置页面的表单。修改表单元素后，它们被标记为unsaved并具有不同的边框颜色。保存表单后，它们将使用其他边框颜色标记为已保存。

我想要的是，保存表单后，边框将逐渐消失。

订单将去：

<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

如果在saved删除类时可以触发CSS3转换，那么它可能会淡出，并且一切都会变质。当前，我必须手动对其进行动画处理（当然，使用插件），但是它看起来比较不稳定，并且我想将代码移至CSS3，以便更加流畅。

我只需要此功能即可在Chrome和Firefox 4+中运行，尽管其他版本会很好。

CSS：

这是关联的CSS：

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

我想进行以下转换（或类似的转换）：

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;

注意：

就个人而言，我不同意这种用户交互方案，但这就是我们的软件主管所希望的。请不要建议我更改其当前运行方式。谢谢！

CSS转换通过使用CSS为对象定义两个状态来工作。在您的情况下，您定义对象具有类时的外观，"saved"并定义不具有类"saved"时的外观（正常外观）。删除该类时"saved"，它将根据没有"saved"该类的对象的转换设置转换到其他状态。

如果CSS过渡设置适用于对象（没有"saved"类），则它们将适用于两个过渡。

如果您在提供的HTML中包含了要使用的所有相关CSS，我们可以为您提供更具体的帮助。

从您的HTML看，我的猜测是您的过渡CSS设置仅适用.saved于此，因此在删除它时，没有控件可以指定CSS设置。您可能想要添加一直".fade"保留在对象上的另一个类，并且可以在该类上指定CSS过渡设置，以使它们始终有效。

@ jfriend00的答案有助于我理解仅删除类（不添加）的动画技术。

“基本”类应具有transition属性（如transition: 2s linear all;）。当在此元素上添加或删除任何其他类时，这将启用动画。但是要在添加其他类（并且仅移除动画类）时禁用动画，我们需要添加transition: none;到第二个类。

例

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（仅需添加类）：

var timeout = null;

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

本示例的插件。

使用此代码，只会删除recently-updated类。

基本上像这样设置您的css：

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

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

就我而言，我对不透明度转换有一些问题，因此此问题得以解决：

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

鼠标输入

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

鼠标离开

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