移動端:active,:hover無法很好觸發動畫的解決方案

1:問題環境:

用css3定義了一個動畫,使用:hover偽類調用動畫時在移動端不能很好的進行動畫.

2:解決方案:

定義一個open類,滿足open類的情況下觸發動畫

使用js事件去控制動畫,當滑動的時候加上open類,然后延遲與動畫相同的時間移除open類

這樣就能很好的控制動畫了

3：附上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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【移動端debug-4】iOS下setTimeout無法觸發focus事件的解決方案移動端適配解決方案移動端1px解決方案移動端position:fixed 解決方案移動端無法監聽頁面刷新或關閉 beforeunload無效解決方案移動端：視頻、音頻手機端無法自動播放問題解決方案移動端滾動穿透問題完美解決方案 Web移動端Fixed布局的解決方案移動端壓縮並ajax上傳圖片解決方案移動端placeholder不能垂直居中解決方案