删除类时的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"类),则它们将应用于两个转换.

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

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

Answer 2

@jfriend00的答案帮助我理解动画技术,只删除类(不添加).

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

这个例子的掠夺者.

使用此代码,只会删除recently-updated类的动画.

Answer 3

基本上设置你的CSS如:

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

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