移动端:active,:hover无法很好触发动画的解决方案_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:44
Original
1641 Leute haben es durchsucht

移动端: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>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage