类删除时的CSS过渡 [英] CSS transition when class removed

问题描述

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

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.

订单将发送:

<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，以便更加流畅.

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.

我只需要在Chrome和Firefox 4+上运行它，尽管其他工具会很好.

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

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;

注意:

我个人不同意这种用户交互方案，但这就是我们的软件负责人想要的方案.请不要建议我更改其当前的运行方式.谢谢！

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!

推荐答案

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

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过渡设置应用于对象(没有"saved"类)，则它们将应用于两个过渡.

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

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

We could help more specifically if you included all relevant CSS you're using to with the HTML you've provided.

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

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.

这篇关于类删除时的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！