手機上的按鈕保持焦點或活動狀態，導致CSS動畫出現問題
P粉043295337
2023-08-28 15:14:37
<p>我正在嘗試在每次點擊按鈕時實現動畫效果，它在桌面上運行良好，但在手機上無法實現相同效果。我必須先點擊按鈕，然後點擊其他地方以取消CSS的焦點狀態，然後再次點擊按鈕以獲得動畫效果。 </p>
<p>以下是程式碼片段。 </p>
<p>
<pre class="brush:css;toolbar:false;">.btn_container {
color: #35f8ff;
position: relative;
display: inline-block;
text-align: center;
margin: 2.5rem auto;
}
.prog_btn {
text-transform: uppercase;
font-size: 1.3rem;
padding: 10px 25px;
z-index: 3;
background-color: transparent;
cursor: pointer;
transition: 0.2s ease-out;
position: relative;
margin: auto;
}
.btn_container .svgStroke {
position: absolute;
z-index: 1;
width: 100%;
top: -25%;
left: 0;
}
.btn_container .svgStroke path {
stroke-dasharray: 100;
stroke-dashoffset: -800;
stroke-width: 2;
transition: all 1s ease-in-out;
stroke: #35f8ff;
}
@keyframes dash {
0% {
stroke-dasharray: 100;
stroke-width: 2;
}
50% {
stroke-width: 4;
stroke: #35f8ff;
filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
}
100% {
stroke-dashoffset: 800;
stroke-width: 2;
}
}
.prog_btn:hover .svgStroke path {
cursor: pointer;
animation: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prog_btn:hover {
font-size: 1.2rem;
}
.add {
display: inline-block;
margin-right: 0.75rem;
height: 1.5rem;
width: 1.5rem;
}</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" stroke-width="1.5" stroke="currentColor" class="add" >
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
></path>
</svg> Add 10%
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
stroke="white"
stroke-width="2"
></path>
</svg>
</div></pre>
</p>
<p>這裡還有CodePen連結。 </p>
我希望在動畫結束時能夠取消焦點（即模糊），但這沒有起作用。
這是一個稍微笨拙的解決方法 - 這個片段在動畫結束時移除了動畫，並在有另一個touchstart事件時重新設定動畫。它使用的是樣式設定而不是類別。
let touchDevice = false; const progBtn = document.querySelector('.prog_btn'); const path = document.querySelector('.prog_btn +.svgStroke path'); path.addEventListener('animationend', function() { path.style.animation = ''; }); progBtn.addEventListener('touchstart', function() { touchDevice = true; path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; }); progBtn.addEventListener('mouseover', function() { path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; });.btn_container { color: #35f8ff; position: relative; display: inline-block; text-align: center; margin: 2.5rem auto; } .prog_btn { text-transform: uppercase; font-size: 1.3rem; padding: 10px 25px; z-index: 3; background-color: transparent; cursor: pointer; transition: 0.2s ease-out; position: relative; margin: auto; } .btn_container .svgStroke { position: absolute; z-index: 1; width: 100%; top: -25%; left: 0; } .btn_container .svgStroke path { stroke-dasharray: 100; stroke-dashoffset: -800; stroke-width: 2; transition: all 1s ease-in-out; stroke: #35f8ff; } @keyframes dash { 0% { stroke-dasharray: 100; stroke-width: 2; } 50% { stroke-width: 4; stroke: #35f8ff; filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff); } 100% { stroke-dashoffset: 800; stroke-width: 2; } } .prog_btn:hover+.svgStroke path { cursor: pointer; } .prog_btn:hover { font-size: 1.2rem; } .add { display: inline-block; margin-right: 0.75rem; height: 1.5rem; width: 1.5rem; }