Solution for mobile terminal: active, :hover not triggering animation well
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.
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
<!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>
How to vertically center div text
What should I do if chaturbate is stuck?
What are the big data storage solutions?
Why can't my mobile phone make calls but not surf the Internet?
Introduction to foreign free vps software
What to do if the remote desktop cannot connect
How to use setrequestproperty
Restart server command
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
