実現したいこと
aタグなどリンク要素に記述したhoverアクションをスマホでも見せたいので
親要素にontouchstart=""を記述し、タップすることでアクションが起こるよう記述しています。
しかし今の記述ではアクションを眺める暇なくリンク先へ飛んでしまいます。
1回タップしたらホバーアクション発動 → 2回目のタップでリンクに行く という仕様にしたいです。
発生している問題・エラーメッセージ
html
1<div class="wrapper" ontouchstart="">2 <h2 class="for-a">aタグ</h2>3 <a href="https://teratail.com/" id="sprite_dancer_a" class="sprite_dancer"></a>4 5 <h2 class="for-div">divタグ(onclick属性)</h2>6 <div id="sprite_dancer_div" class="sprite_dancer" onclick="location.href='https://www.google.com/'"></div>7</div>
css
1.sprite_dancer {2 background-image: url("../img/test-image.png");3 width: 213px;4 height: 190px;5 background-position: 0 0;6}7 8// スプライトアニメーション 9 10.sprite_dancer:hover{11 animation: sprite 1s steps(10) infinite;12}13 14@keyframes sprite {15 from { background-position: 0 0; }16 to { background-position: -2130px 0; }17}
cssにてhover要素が追加されたらアニメーションが発動するように設定しています。
以下はこのコードを書いたデモサイトです。
https://rsaeki0.parallel.jp/sprite-hover/
しかしこれを自分のスマートフォン(android, chrome)で確認していたのですが、
希望通りの挙動をする時もあれば1回のタップでリンク先へ飛んだり、何回タップしてもリンク先に行かなかったりと非常に挙動が不安定です。
試したこと
jQueryで、1回目のタップではアニメーションが記述されたクラスを付与して
2回目のタップ時にリンク先へ飛ぶように書いてみました。
css
1.animating {2 animation: sprite 1s steps(10) infinite;3}4 5@keyframes sprite {6 from { background-position: 0 0; }7 to { background-position: -2130px 0; }8}
javascript
1// aタグをクリックした回数を記録する変数2let clickCount = 0;3 4// .sprite_dancerをクリックした際の処理5$(".sprite_dancer").on("click", function(event) {6 event.preventDefault();7 clickCount++;8 if (clickCount === 1) {9 // アニメーションを開始する10 $(this).addClass("animating");11 setTimeout(function() {12 // アニメーションが終了したら、再度クリックした場合に備えて、13 // animatingクラスを除去する14 $(".sprite_dancer").removeClass("animating");15 }, 3000);16 } else if (clickCount === 2) {17 // リンク先へ遷移する18 window.location = $(this).attr("href");19 }20});
しかしこれは余りにも力技すぎる気がします。
もっとスマートな方法をどなたかご存知ないでしょうか。
もはやaタグに記述したhoverアクションをスマホで見せること、ontouchstartを書いて希望の挙動を実現させようとすることそのものが間違いなのでしょうか?
どうかご教授お願い致します。
追記)質問サイトに初めて投稿しました。
様々な方に質問を見ていただきたかったのでQiitaにも同質問をマルチポストしてしまいました。
https://qiita.com/awakening82/questions/9143966bcf2b01272526
回答者の皆さまが不快に思われるなら本投稿を削除致します。
申し訳ございません。

0 コメント