随着css3的流行,现在很多可以使用css3实现的动画效果,基本上就选择css3实现,尤其是在移动端的(移动端对css3的支持度相对比较高,PC端有很多IE8及以下的浏览器拖着后腿呢)。
最近做了一个app活动页面,避嫌就不上页面设计图了,其中有一块是这样的:
一个3月份日历,每天可以点击领取一种奖励(就直接称之为奖励吧),每到新的一天,都要有明显提示,今天是第一次进入当前页面,有奖励可以领取。
我们的设计方案:当天可点击的提示是通过边框不停的闪动实现。通过js获取当天的日期,匹配日历当中的日期,为其添加一个class,从而实现提示可点击状态。
.calendar-table td.onActive:before{
-webkit-animation: borderchg 1s infinite ease-in;
animation: borderchg 1s infinite ease-in;
}
下面就涉及到animation动画的编写了,事实上这个动画很简单,就是使用内阴影模拟的边框,从无到有,再逐渐消失的过程。
@keyframes borderchg {
100% {
-webkit-box-shadow: inset 0 0 1px 3px #ef4444;
box-shadow: inset 0 0 1px 3px #ef4444;
}
}
工作到这里算是完成了,效果也基本实现了,剩下的就是后面的流程,后台开发,测试,上线的工作了。
可是临到快上线的时候,后台开发人员拿着一款三星的手机,过来跟我说,这个三星手机上没有当天可点击的提示。
翻css,没有找到问题根源,想着就这一款三星的手机,就算了,直接无视他。
晚上上线之后,突然发现,凡是ios8的系统的iPhone手机,也没有这个当天可点击的提示。这就比较坑了,不可能无视这么多的iPhone手机啊。怎么办?
第一想法是换解决方案,可能是box-shadow的问题(然而我并不能确认),反正是html和css的问题,所以换解决方案并不算麻烦,然后我就重新设计了一下当天可点击的提示,通过径向渐变的背景色不断闪现的效果来提示。
@keyframes borderchg {
100% {
background-image: -webkit-radial-gradient(farthest-corner, rgba(239, 68, 68, 0.8), transparent);
background-image: radial-gradient(farthest-corner, rgba(239, 68, 68, 0.8), transparent);
}
}
浏览器测试没有问题,然后继续线上替换css,发现在ios8系统的iPhone上依然一样,没有提示。
这会真的是懵逼了,不知所措。
后来去网上搜索了一下别人写的css3的animation动画,发现我一直忽视了的一点:keyframes关键帧。
这个也是css3的新添加的,所以很多人在写keyframes的时候,也像其他属性一样添加了前缀-webkit-,此时才想到keyframes是不是应该也有兼容性问题。
ios8 Supported width prefix:-webkit-。就这么个东西,折腾了一个多小时,其实就是思维局限了。
最终还是采用原方案:
@-webkit-keyframes borderchg {
100% {
-webkit-box-shadow: inset 0 0 1px 3px #ef4444;
box-shadow: inset 0 0 1px 3px #ef4444;
}
}
总算是闹明白问题在哪了,还是兼容性问题,只不过是一直被我潜意识忽略了的keframes的兼容性问题。