問題描述

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;

問題解答

不貼代碼，怎么破？

css 前綴呢？ 寫了？

微信用的是QQ瀏覽器的“X5 內核”， 需要添加-webkit-transition才能支持過渡。

遇到了相同問題。添加webkit前綴仍然解決不了其他測試機包括iphone 6均可以，我記得的6s plus不行

更新：緩存問題，經驗證加前綴可以解決

是opacity的問題 去掉就好用了

不知道你是不是跟我發生了同樣的錯誤~調用動畫的代碼請請放在window.onload = function(){}方法內~~