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. android - ionic应用打包部署了,但是连接不上服务器,就连写一个a标签链接到百度都不可以2. boot2docker无法启动3. css - 移动端 oppo 手机之 Border-radius4. java - 什么叫构建?求解答 ^.^5. gosts内容是空的6. PHP单例模式7. css3 - 有好的Blog的CSS样式吗?8. javascript - vue2.0中使用vue2-dropzone的demo,vue2-dropzone的github网址是什么??百度不到。9. css3 - 微信前端页面遇到的transition过渡动画的bug10. browsersync检测的静态页面只能用index.html命名,用demo.html就不能实时同步,检测动态页面的时候,比如wamp环境下,用browsersync能打开页面,但不能实现同步