手机上的按钮保持焦点或活动状态，导致CSS动画出现问题
<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>
1
897
收藏
我希望在动画结束时能够取消焦点（即模糊），但这没有起作用。
这是一个稍微笨拙的解决方法 - 这个片段在动画结束时移除了动画，并在有另一个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; }<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> 添加 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>