删除类时的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转换，那么它可能会淡出，一切都将变得晦涩难懂。 目前，我必须手动设置animation效果（当然使用插件），但看起来不稳定，我想将代码移动到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;
注意：
就我个人而言，我不同意这种用户交互scheme，但这就是我们的软件主pipe想要的方式。 请不要build议我改变它目前的function。 谢谢！
通过使用CSS定义对象的两个状态，CSS转换工作。 在你的情况下，你可以定义对象在"saved"类时的外观，当你没有"saved"类（这是正常的样子）时，定义它的外观。 当您删除"saved"类时，将根据没有"saved"类的对象的过渡设置过渡到其他状态。
如果CSS转换设置应用于对象（没有"saved"类），那么它们将应用于两个转换。
如果您将所用的所有相关CSS都包含在您提供的HTML中，我们可以提供更具体的帮助。
我看你的HTML的猜测是你的过渡CSS设置只适用于.saved ，因此当你删除它，没有控制指定一个CSS设置。 您可能需要添加另一个类".fade" ，您可以随时在对象上留下一个类，您可以在该类上指定CSS转换设置，以便始终有效。
@ jfriend00的答案可以帮助我理解删除类（不添加 ）的animation技术。
一个“基础”类应该有transition属性（如transition: 2s linear all; ）。 当在这个元素上添加或删除任何其他类时，这将启用animation。 但是当添加其他类时（和只删除类的animation），禁用animation我们需要添加transition: none; 到第二class。
例
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类将是animation。
基本上build立你的CSS像：
element { border: 1px solid #fff; -webkit-transition: border .5s linear; -moz-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; }
鼠标input
$('#dropdown').removeClass('ns').addClass('fade');
鼠标离开
$('#dropdown').addClass('ns').removeClass('fade');
