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

1:问题环境:

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

2:解决方案:

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

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

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

3：附上demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <style>

            .nav{width:100%;height: 200px;background-color: blue;}

            /*动画调用满足条件*/

            .nav.open{-webkit-animation:change 2s linear running}

            /*定义动画*/

            @-webkit-keyframes change{

                from{height: 200px;}

                to{height: 300px;}

            }

        </style>

    </head>

    <body>

        <div class="nav"></div>

        <script type="text/javascript">

              var nav=document.querySelector('.nav');//获取div

            nav.addEventListener("touchstart",StartAnimation,false);//添加触摸事件

            //开始动画

            function StartAnimation()

            {

                document.querySelector('.nav').className="nav open";//添加open类

                setTimeout('StopAnimation()',2000);//延迟关闭动画 移除open类

            }

            //结束动画

            function StopAnimation()

            {

                document.querySelector('.nav').className="nav";

            }

        </script>

    </body>

</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. SQL——触发器——插入触发器——边学边项目写的。

    需求: 项目表项目编码触发器编写 为项目表DwProject编写触发器,目的为当创建新项目时,且ProjectNo 为Null或空字符串时,自动创建项目编号,编号格式为4位年号,2位月份,2位顺序号, ...

  2. vim: vs sp 调整窗口高度和宽度

    转自:http://www.cnblogs.com/xuechao/archive/2011/03/29/1999292.html vim多窗口有时候需要调整默认的窗口宽度和高度,可以用如下命令配合使 ...

  3. 【JAVA多线程中使用的方法】

    一.sleep和wait的区别. 1.wait可以指定时间,也可以不指定. 而sleep必须制定. 2.在同步的时候,对于CPU的执行权和以及锁的处理不同. wait:释放执行权,释放锁. sleep ...

  4. SQL集合操作符样例（UNION,INTERSECT,EXCEPT）

    由于MYSQL目前只实现了UNION, 所以后面两个就没得玩罗.... SELECT emp_id, assigned_branch_id -> FROM employee -> WHER ...

  5. Linux中带颜色输出的printf使用简介(\033)

    昨晚懒得FQ, 百度了一下linux中printf输出颜色的方法, 结果搜索结果质量让人倍感伤心. 越来越不想用bd了.还是Google一下吧, 手气真好, 第一个内容就很清楚明了! 我还是直接简单翻 ...

  6. CentOS下Apache安装SSL

    https是一个安全的访问方式,数据在传输过程中是加密的.https基于ssl. 一.安装apache和ssl模块1.安装apacheyum install httpd2.安装ssl模块yum ins ...

  7. .NET NLog 详解(一)

    安装NLog NLog 的源代码托管在Github 上,一般的人直接使用NuGet就可以了. 这里我们选择安装NLog.Config.当然最方便的还是直接使用命令行: Install-Package ...

  8. window.location.href和window.location.replace的区别

    有3个html页面(.html, .html, .html). 进系统默认的是1.html ,当我进入2.html的时候, .html里面用window.location.replace(" ...

  9. 等号赋值与memcpy的效率问题

    转自:http://www.aiuxian.com/article/p-1309055.html 偶尔看到一个说法,说,小内存的拷贝,使用等号直接赋值比memcpy快得多.结合自己搜集到的资料,整理成 ...

  10. C语言中的回调函数调用过程以及函数指针使用

    回调函数比喻: 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货. 在这个例子里,你的电话号码就叫回调 ...