点击按钮,从底部滑出一个对话框效果,在其他浏览器都可以正常滑出,但是在safari浏览器中不能弹出!当去掉下面这段CSS3代码后,就可以正常弹出效果,请问safari不支持animation 属性嘛?
.nctouch-bottom-mask.up {
display: block;
bottom: 44px;
-webkit-animation: optionBlockUp 0.5s ease-in-out;
animation: optionBlockUp 0.5s ease-in-out;
}
@-webkit-keyframes optionBlockUp
{
from {
display: none;
bottom: -100%;
}
to {
display: block;
bottom: 0;
}
}
@keyframes optionBlockUp
{
from {
display: none;
bottom: -100%;
}
to {
display: block;
bottom: 0;
}
}
keyframes中,用opacity取代display:none,display:block
display是瞬間值,不能做補間動畫
另外,建議將bottom替換成transform,因為bottom涉及瀏覽器重排,用transform性能能提高不少