类删除时 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 转换通过使用 CSS 为对象定义两种状态来工作。在您的情况下，您定义对象在具有类

"saved"

时的外观，并定义它不具有类

"saved"

时的外观（这是正常的外观）。当您删除类

"saved"

时，它将根据没有

"saved"

类的对象的转换设置转换到其他状态。

如果 CSS 过渡设置应用于对象（没有

"saved"

类），那么它们将应用于两个过渡。

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

通过查看您的 HTML，我的猜测是您的过渡 CSS 设置仅适用于

.saved

，因此当您删除它时，没有任何控件可以指定 CSS 设置。您可能想要添加另一个始终保留在对象上的类

".fade"

，并且您可以在该类上指定 CSS 过渡设置，以便它们始终有效。

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

基本上设置你的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');

Answer 5

我使用了CSS的

:not(...)

功能，如下所示：

mat-card.selected {
  border: 3px solid #1779ba;
  box-shadow: 0 0 10px #e6e6e6;
  transition: all 0.1s ease;
}

mat-card:not(.selected) {
  transition: all 0.1s ease;
}

this seemed to work for me quite well.