类移除时的CSS转换

前端之家收集整理的这篇文章主要介绍了类移除时的CSS转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个作为设置页面的窗体。当表单元素被修改时,它们被标记为未保存,并具有不同的边框颜色。保存表单时,它们将通过另一个边框颜色标记为已保存。

我想要的是,当窗体保存时,边框将逐渐淡出。

订单将去:

<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

如果我可以得到一个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);
-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;

注意:

就个人而言,我不同意这种用户交互方案,但这是我们的软件领导想要的方式。请不要建议我改变它的功能目前的方式。谢谢!

解决方法

CSS转换通过使用CSS定义对象的两个状态来工作。在你的情况下,你定义对象的外观,当它有类“保存”,你定义它的样子,当它没有类“保存”(这是正常的外观)。当删除类“saved”时,它将根据没有“saved”类的对象的过渡设置转换到其他状态。

如果CSS转换设置适用于对象(没有“保存”类),那么它们将应用于这两个转换。

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

我猜猜你的HTML是你的过渡CSS设置只适用于.saved,因此当你删除它,没有控件来指定CSS设置。你可能想添加另一个类“.fade”,你一直留在对象上,你可以指定你的CSS转换设置,使它们总是生效。

猜你在找的CSS相关文章