Home > Web Front-end > HTML Tutorial > Solution for mobile terminal:active,:hover not triggering animation well_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:47:44
Original
1665 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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template