搜尋

首頁  >  問答  >  主體

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;
巴扎黑巴扎黑2778 天前783

全部回覆(6)我來回復

  • 迷茫

    迷茫2017-04-17 11:18:22

    不貼程式碼,怎麼破?

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:18:22

    css 前綴呢? 寫了?

    回覆
    0
  • 迷茫

    迷茫2017-04-17 11:18:22

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

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:18:22

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

    更新:快取問題,經驗證加前綴可以解決

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:18:22

    是opacity的問題 去掉就好用了

    回覆
    0
  • 阿神

    阿神2017-04-17 11:18:22

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

    回覆
    0
  • 取消回覆