モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する
P粉043295337
2023-08-28 15:14:37
<p>ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。 </p>
<p>以下はコードスニペットです。 </p>
<p>
<pre class="brush:css;toolbar:false;">.btn_container {
色: #35f8ff;
位置: 相対的;
表示: インラインブロック;
テキスト整列: 中央;
マージン: 2.5rem 自動;
}
.prog_btn {
テキスト変換: 大文字;
フォントサイズ: 1.3rem;
パディング: 10px 25px;
z インデックス: 3;
背景色: 透明;
カーソル: ポインタ;
トランジション: 0.2 秒のイーズアウト。
位置: 相対的;
マージン: 自動;
}
.btn_container .svgStroke {
位置: 絶対;
z インデックス: 1;
幅: 100%;
トップ: -25%;
左: 0;
}
.btn_container .svgストロークパス {
ストローク-ダシャ配列: 100;
ストロークダッシュオフセット: -800;
ストローク幅: 2;
遷移: すべて 1 のイーズインアウト。
ストローク: #35f8ff;
}
@keyframes ダッシュ {
0% {
ストローク-ダシャ配列: 100;
ストローク幅: 2;
}
50% {
ストローク幅: 4;
ストローク: #35f8ff;
フィルター: ドロップシャドウ(0px 0px 3px #e8615a) ドロップシャドウ(0px 0px 20px #35f8ff) ドロップシャドウ(0px 0px 150px #35f8ff);
}
100% {
ストローク-ダッシュオフセット: 800;
ストローク幅: 2;
}
}
.prog_btn:hover .svgストロークパス {
カーソル: ポインタ;
アニメーション: ダッシュ 1.5 秒の cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prog_btn:ホバー {
フォントサイズ: 1.2rem;
}
。追加 {
表示: インラインブロック;
右マージン: 0.75rem;
高さ: 1.5レム;
幅: 1.5レム。
}</pre>
<pre class="brush:html;toolbar:false;"><div class="btn_container">
<div class="prog_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ストローク幅="1.5" ストローク="currentColor" class="add" >
<パス
ストロークラインキャップ = "丸"
ストロークライン結合 = "ラウンド"
d="M12 4.5v15m7.5-7.5h-15"
>
</svg> 10% 追加
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<パス
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
ストローク = "白"
ストローク幅="2"
>
</svg>
</div></pre>
</p>
<p>ここには CodePen のリンクもあります。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
アニメーションの最後にフォーカス (つまり、ぼかし) をキャンセルできることを期待していましたが、これは機能しませんでした。
これは少し不格好な回避策です。このスニペットは、アニメーションが終了するとアニメーションを削除し、別のタッチスタート イベントが発生すると再びアニメーション化します。クラスの代わりにスタイル設定を使用します。