ホームページ > 記事 > ウェブフロントエンド > モバイル端末の解決策:アクティブ、:ホバーでアニメーションがトリガーされない Well_html/css_WEB-ITnose
モバイル端末の解決策:アクティブ、:ホバーでアニメーションがトリガーされない Well_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:47:441641ブラウズ
モバイル端末で:active、:hover がうまくアニメーションをトリガーできない問題の解決策
1: 問題環境:
CSS3 でアニメーションを定義し、:hover 疑似クラスを使用してアニメーションを呼び出す場合、モバイル端末ではアニメーションをうまく実行できません
2: 解決策:
オープンクラスを定義し、オープンクラスが満たされたときにアニメーションをトリガーします
js イベントを使用してアニメーションを制御し、スライドするときにオープンクラスを追加します。 、アニメーションクラスと同じ時間までに open の削除を遅らせます
この方法でアニメーションを非常にうまく制御できます
3: 添付のデモ
<!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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。