移动端:active,:hover无法很好触发动画的解决方案

1:问题环境:

用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画.

2:解决方案:

定义一个open类,满足open类的情况下触发动画

使用js事件去控制动画,当滑动的时候加上open类,然后延迟与动画相同的时间移除open类

这样就能很好的控制动画了

3：附上demo

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title></title>
  7.         <style>
  8.             .nav{width:100%;height: 200px;background-color: blue;}
  9.             /*动画调用满足条件*/
  10.             .nav.open{-webkit-animation:change 2s linear running}
  11.             /*定义动画*/
  12.             @-webkit-keyframes change{
  13.                 from{height: 200px;}
  14.                 to{height: 300px;}
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div class="nav"></div>
  20.         <script type="text/javascript">
  21.               var nav=document.querySelector('.nav');//获取div
  22.             nav.addEventListener("touchstart",StartAnimation,false);//添加触摸事件
  23.             //开始动画
  24.             function StartAnimation()
  25.             {
  26.                 document.querySelector('.nav').className="nav open";//添加open类
  27.                 setTimeout('StopAnimation()',2000);//延迟关闭动画 移除open类
  28.             }
  29.             //结束动画
  30.             function StopAnimation()
  31.             {
  32.                 document.querySelector('.nav').className="nav";
  33.             }
  34.         </script>
  35.     </body>
  36. </html>

　　

移动端:active,:hover无法很好触发动画的解决方案的更多相关文章

  1. 移动端模拟hover

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  2. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  3. UIImageView 自带动画+N张图片实现很炫的动画

    gitHub上又看到个很炫的动画:https://github.com/MartinRGB/GiftCard-iOS   看了看他的代码,发现核心动画(就是把按钮包装成一个礼物盒)其实很简单,就是把一 ...

  4. PC端的软件端口和adb 5037端口冲突解决方案

    引用https://www.aliyun.com/jiaocheng/32552.html 阿里云 >  教程中心   >  android教程 >  PC端的软件端口和adb 50 ...

  5. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  6. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  7. vue实现滚动条滚到相应高度触发动画的操作

    一.vue项目引入animate.css 第一步:在命令行中执行: npm install animate.css --save 第二步:引入及使用: main.js中: import animate ...

  8. 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  9. 解决IOS移动端 Safari流浪器 onclick无法触发的问题

    在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变 ...

随机推荐

  1. Oracle数据库备份与还原操作具体步骤

    Oracle数据库导出操作 导入导出都要进行目录创建与授权. 在pl/sql里面编写也可以 select * from dba_directories(这个是查看创建的目录) drop directo ...

  2. Delphi的属性Property

    参考:http://www.cnblogs.com/edisonfeng/archive/2012/05/22/2513727.html 一.基本属性 TOnUserInfoShow = proced ...

  3. MySQL基础二

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...

  4. 使用python递归子目录处理日志文件

    重要说明: (1)python使用4个空格进行层次缩进的(不是tab),在eclipse里面可以直接使用tab缩进,是因为eclipse会实时地将tab转成4个空格 (2)在eclipse中安装pyD ...

  5. PHP不同域名cookie共享（单点登录实现原理）

    PHP使用P3P完成COOKIE跨域操作实际实用中,类似的需求有,比如说我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是单点登录(SSO)功能.为了测试的方便,先编辑ho ...

  6. centos(x86 64位系统)使用boost

    1. 安装gcc,g++,make等开发环境 yum groupinstall "Development Tools" 2. 安装boost yum install boost b ...

  7. Oracle buffer cache

    Buffer Cache buffer cache 结构图 HASH链 ORACLE使用HASH算法,把buffer cache中每个buffer的buffer header串联起来,组成多条hash ...

  8. 剑指offer系列——二维数组中，每行从左到右递增，每列从上到下递增，设计算法找其中的一个数

    题目:二维数组中,每行从左到右递增,每列从上到下递增,设计一个算法,找其中的一个数 分析: 二维数组这里把它看作一个矩形结构,如图所示: 1 2 8 2 4 9 12 4 7 10 13 6 8 11 ...

  9. java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory 解决方案

    缺少 commons-logging.jar

  10. 关于css的全面学习笔记

    1.text-align 属性规定元素中的文本的水平对齐方式.该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式.通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 just ...