問(wèn)題描述

點(diǎn)擊按鈕，從底部滑出一個(gè)對(duì)話框效果，在其他瀏覽器都可以正常滑出，但是在safari瀏覽器中不能彈出！當(dāng)去掉下面這段CSS3代碼后，就可以正常彈出效果，請(qǐng)問(wèn)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; }}

問(wèn)題解答

keyframes中，用opacity替換display:none,display:block display是瞬間值，不能做補(bǔ)間動(dòng)畫

另外，建議將bottom替換成transform，因?yàn)閎ottom涉及瀏覽器重排，用transform性能能提高不少