移除类时的 CSS 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9509002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition when class removed
提问by beatgammit
I have a form that functions as a settings page. When form elements are modified, they are marked as unsavedand have a different border color. When the form is saved, they are marked as saved by having another border color.
我有一个用作设置页面的表单。当表单元素被修改时，它们被标记为unsaved并具有不同的边框颜色。保存表单时，它们会通过另一种边框颜色标记为已保存。
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 savedis 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.
如果我可以在saved移除类时触发 CSS3 过渡，那么它可能会淡出并且一切都会变得很有趣。目前，我必须手动为它设置动画（当然使用插件），但它看起来很不稳定，我想将代码移至 CSS3，这样它会更流畅。
I only need this to work in Chrome and Firefox 4+, though others would be nice.
我只需要它在 Chrome 和 Firefox 4+ 中工作，尽管其他人会很好。
CSS:
CSS：
Here's the associated CSS:
这是相关的 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!
就我个人而言，我不同意这种用户交互方案，但这正是我们的软件主管想要的。请不要建议我改变它目前的运作方式。谢谢！
采纳答案by jfriend00
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.
CSS 转换通过使用 CSS 为对象定义两个状态来工作。在您的情况下，您定义对象在具有类时的外观，"saved"并定义没有类"saved"时的外观（这是正常外观）。当您移除 class 时"saved"，它将根据没有"saved"class的对象的转换设置转换到其他状态。
If the CSS transition settings apply to the object (without the "saved"class), then they will apply to both transitions.
如果 CSS 过渡设置适用于对象（没有"saved"类），则它们将适用于两个过渡。
We could help more specifically if you included all relevant CSS you're using to with the HTML you've provided.
如果您在提供的 HTML 中包含了您正在使用的所有相关 CSS，我们可以提供更具体的帮助。
My guess from looking at your HTML is that your transition CSS settings only apply to .savedand 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.
我从查看您的 HTML 的猜测是，您的过渡 CSS 设置仅适用于.saved，因此当您删除它时，没有用于指定 CSS 设置的控件。您可能希望添加另一个".fade"始终保留在对象上的类，并且您可以在该类上指定 CSS 过渡设置，以便它们始终有效。
回答by Ruslan Stelmachenko
The @jfriend00's answer helps me to understand the technique to animate only removeclass (not add).
@jfriend00 的回答帮助我理解动画只删除类（而不是add）的技术。
A "base" class should have transitionproperty (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.
“基”类应该具有transition属性（如transition: 2s linear all;）。当在此元素上添加或删除任何其他类时，这将启用动画。但是要在添加其他类时禁用动画（并且只删除动画类），我们需要添加transition: none;到第二个类。
Example
例子
CSS:
CSS：
.issue {
background-color: lightblue;
transition: 2s linear all;
}
.recently-updated {
background-color: yellow;
transition: none;
}
HTML:
HTML：
<div class="issue" onclick="addClass()">click me</div>
JS (only needed to add class):
JS（只需要添加类）：
var timeout = null;
function addClass() {
$('.issue').addClass('recently-updated');
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(function () {
$('.issue').removeClass('recently-updated');
}, 1000);
}
plunkerof this example.
这个例子的plunker。
With this code only removing of recently-updatedclass will be animated.
使用此代码，只会对recently-updated类的删除进行动画处理。
回答by Ken Wheeler
Basically set up your css like:
基本上设置你的css，如：
element {
border: 1px solid #fff;
transition: border .5s linear;
}
element.saved {
border: 1px solid transparent;
}
回答by user956584
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');
