手機上的按鈕保持焦點或活動狀態，導致CSS動畫出現問題

Question

我正在嘗試在每次點擊按鈕時實現動畫效果，它在桌面上運行良好，但在手機上無法實現相同效果。我必須先點擊按鈕，然後點擊其他地方以取消CSS的焦點狀態，然後再次點擊按鈕以獲得動畫效果。以下是程式碼片段。 .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉493534105 · Answer

我希望在動畫結束時能夠取消焦點（即模糊），但這沒有起作用。

這是一個稍微笨拙的解決方法 - 這個片段在動畫結束時移除了動畫，並在有另一個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;
}


  
     添加 10%