小知识点:rotate/translate等导致字体瞬间模糊又还原,如何处理
用css3写了一个 旋转字体图标的方法,很简单的代码,如下:
//css
.icon-down {
font-size: 18px;
color: #19bd9b;
transition: all 1s ease;
-webkit-transition: all 1s ease;
transform: rotate(0);
-webkit-transform: rotate(0);
}
.icon-down.on {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
}
//html
<i class="iconfont icon-down"></i>
//js
$(".select-box").click(function() {
var t = $(this);
var e = t.find(".select-option").css("display");
if("none" == e){
$(".select-box .select-option").css("display","none");
$(".select-box .select-value > i").removeClass("on");
t.find(".select-option").slideDown();
t.find(".select-value > i").addClass("on");
}else{
t.find(".select-option").slideUp();
t.find(".select-value > i").removeClass("on");
}
});
上面代码运行后,发现在与该代码毫无关系的一个节点的字体变模糊了一下,一秒后又还原了,作为强迫症患者,这肯定不能忍,后来发现是这句导致
这句就只添加了名为on的class,其中只增减了一句rotate的代码,搜了搜,不只我一个人遇到了这个问题,好吧,css3的问题,按照大家的办法试了下。
1,将宽高设为了偶数,不行
2,增加css backface-visibility:hidden,不行。
3,translate里的参数用固定值不用百分比这些,我用rotate,这用不着。
4,给字体强制透明度,weight,并提高优先级,不行。
后来试着在代码里加了一句transform:translate3d(0,0,0),然后就解决了。。。
.icon-down {
display: block;
font-size: 18px;
color: #19bd9b;
transition: all 1s ease;
-webkit-transition: all 1s ease;
transform: rotate(0);
-webkit-transform: rotate(0);
transform:translate3d( 0, 0, 0);
-webkit-transform:translate3d( 0, 0, 0);
}
.icon-down.on {
transform: rotate(-180deg);
-webkit-transform: rotate(0);
transform:translate3d( 0, 0, 0);
-webkit-transform:translate3d( 0, 0, 0);
}
后来发现将translateZ(0)代替 translate3d(0,0,0)也可以解决。