Question

我有一个用作设置页面的表单。修改表单元素时，它们标记为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;

注意：

就个人而言，我不同意这种用户互动方案，但这就是我们的软件主管想要它的方式。请不要建议我改变它目前的运作方式。谢谢！

Answer 1

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

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

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

我从您的HTML中猜测，您的转换CSS设置仅适用于.saved，因此当您删除它时，没有控件来指定CSS设置。您可能希望始终在对象上添加另一个类".fade"，并且可以在该类上指定CSS转换设置，以便它们始终有效。

Answer 2

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

A＆＃34; base＆＃34; class应该具有getBar()属性（如transition）。这可以在此元素上添加或删除任何其他类时启用动画。但是要在添加其他类时禁用动画（并且只删除动画类），我们需要将transition: 2s linear all;添加到第二个类。

示例

CSS：

transition: none;

HTML：

.issue { background-color: lightblue; transition: 2s linear all; } .recently-updated { background-color: yellow; transition: none; }

JS（只需要添加类）：

<div class="issue" onclick="addClass()">click me</div>

plunker这个例子。

使用此代码，只会移除var timeout = null; function addClass() { $('.issue').addClass('recently-updated'); if (timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function () { $('.issue').removeClass('recently-updated'); }, 1000); }类。

Answer 3

基本上设置你的css如：

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

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

Answer 4

在我的情况下，我有一些不透明度转换的问题，所以这个解决了它：

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

删除类时的CSS转换

4 个答案: