类移除时的 CSS 过渡

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：

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

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

Answer 2

@jfriend00 的回答帮助我理解了仅对 remove 类（而不是 add）进行动画处理的技术。

“基”类应具有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);
}

plunker 这个例子。

使用此代码，仅删除 recently-updated 类将被动画化。

Answer 3

在我的情况下，我在不透明度过渡方面遇到了一些问题，所以这个解决了它：

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

Answer 4

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

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

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

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