我有一个作为设置页面的窗体。当表单元素被修改时,它们被标记为未保存,并具有不同的边框颜色。保存表单时,它们将通过另一个边框颜色标记为已保存。
我想要的是,当窗体保存时,边框将逐渐淡出。
订单将去:
<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转换设置,使它们总是生效。