css3 - iphone6 plus 微信瀏覽器下transition動畫無效求破
問題描述
iphone6 plus 微信瀏覽器下transition動畫無效但在safari下是ok的,什么原因
opacity: 0; background-color: #378ef1; transform: translateY(100%); -webkit-transform: translateY(100%); transition-property: transform, opacity, -webkit-transform; -webkit-transition-property: transform, opacity, -webkit-transform; transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
active
transform: translateY(0); -webkit-transform: translateY(0); opacity: 1;
問題解答
回答1:不貼代碼,怎么破?
回答2:css 前綴呢? 寫了?
回答3:微信用的是QQ瀏覽器的“X5 內核”, 需要添加-webkit-transition才能支持過渡。
回答4:遇到了相同問題。添加webkit前綴仍然解決不了其他測試機包括iphone 6均可以,我記得的6s plus不行
更新:緩存問題,經驗證加前綴可以解決
回答5:是opacity的問題 去掉就好用了
回答6:不知道你是不是跟我發生了同樣的錯誤~調用動畫的代碼請請放在window.onload = function(){}方法內~~
相關文章:
1. PHP單例模式2. 能用一臺nginx服務器既做反向代理又做web服務器嗎,還是一臺做反向代理一臺做web服務器3. css3圖標4. java - C++ STL迭代器聲明的iterator和reverse_iterator實質區別?是不同數值嗎?5. css3 - 圖文響應式樣式6. javascript - react input file7. python 讀取csv文件可以讀取但內容錯誤,但單獨用excel打開正常,如何解決?8. css - transform-origin 旋轉參考點9. css3 - 如何實現字體顏色漸變?10. javascript - 除了VUE React 這類MVVM還有什么適合做SPA的,特別是里面涉及到Canvas Webgl?
