问答

手机端不兼容keyframes、animation动画

作者:admin 2021-05-09 我要评论

做一个web项目,需适配手机,在项目中做了一个鼠标移入,上滑详细内容的动画,在web浏览器都正常显示,但是在手机浏览器中展示时,动画不起作用,而且已经加过-w...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

做一个web项目,需适配手机,在项目中做了一个鼠标移入,上滑详细内容的动画,在web浏览器都正常显示,但是在手机浏览器中展示时,动画不起作用,而且已经加过-webkit-

.page .list {
-webkit-animation: myMou 1s;
-moz-animation: myMou 1s;
-ms-animation: myMou 1s;
-o-animation: myMou 1s;
animation: myMou 1s;
animation-fill-mode: forwards;
}
.page .list_1 {
-webkit-animation: myMou1 0.5s;
-moz-animation: myMou1 0.5s;
-ms-animation: myMou1 0.5s;
-o-animation: myMou1 0.5s;
animation: myMou1 0.5s;
animation-fill-mode: forwards;
}
@-webkit-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
  }
}
@-o-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
  }
}
@-moz-keyframes myMou {
  0% {
    margin-top: 0px;
  }
  100% {
    transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
  }
}
###

兼容列表 来看,这两个属性的兼容性都是没什么大问题的。

大概率是你触发这个动画(addClass) 之类操作没有被正确触发。

###

鼠标移入适配手机?所以手机上你是用的什么事件来代替鼠标事件?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • grom设置json默认值

    grom设置json默认值

  • Vue路由报错,看着没问题

    Vue路由报错,看着没问题

  • 思否邮箱登录为什么区分大小写了呢?

    思否邮箱登录为什么区分大小写了呢?

  • 有没有能够直接上传markdown文件作为博

    有没有能够直接上传markdown文件作为博

腾讯云代理商
海外云服务器