Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-06-24 11:47:441631browse
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>
Statement：
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