Solution for mobile terminal:active,:hover not triggering animation well_html/css

Solution for mobile terminal:active,:hover not triggering animation well_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:44

Original

1629 people have browsed it

Solution for mobile terminal: active, :hover not triggering animation well

1: Problem environment:

An animation is defined with css3, and when the :hover pseudo-class is used to call the animation Animation cannot be performed well on the mobile terminal.

2: Solution:

Define an open class and trigger the animation when the open class is met

Use js events to To control the animation, add the open class when sliding, and then delay the same time as the animation to remove the open class

This way you can control the animation well

3: Attached 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>

Copy after login