Butang pada mudah alih kekal fokus atau aktif, menyebabkan masalah dengan animasi CSS

Question

Saya cuba mencapai animasi setiap kali saya mengklik butang, ia berfungsi dengan baik pada desktop tetapi saya tidak boleh mencapai kesan yang sama pada mudah alih. Saya perlu mengklik butang dahulu, kemudian klik di tempat lain untuk menyahfokus CSS, kemudian klik butang sekali lagi untuk mendapatkan kesan animasi.

Berikut ialah coretan kod.

.btn_container {
  warna: #35f8ff;
  kedudukan: relatif;
  paparan: inline-block;
  text-align: tengah;
  margin: 2.5rem auto;
}

.prog_btn {
  text-transform: huruf besar;
  saiz fon: 1.3rem;
  padding: 10px 25px;
  indeks z: 3;
  warna latar belakang: telus;
  kursor: penunjuk;
  peralihan: 0.2s pelonggaran;
  kedudukan: relatif;
  margin: auto;
}

.btn_container .svgStroke {
  jawatan: mutlak;
  indeks-z: 1;
  lebar: 100%;
  atas: -25%;
  kiri: 0;
}

.btn_container .svgStroke path {
  strok-dasharray: 100;
  strok-dashoffset: -800;
  lebar lejang: 2;
  peralihan: semua 1s mudah masuk;
  pukulan: #35f8ff;
}

@keyframes dash {
  0% {
    strok-dasharray: 100;
    lebar lejang: 2;
  }
  50% {
    lebar lejang: 4;
    pukulan: #35f8ff;
    penapis: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
  }
  100% {
    strok-dashoffset: 800;
    lebar lejang: 2;
  }
}

.prog_btn:hover+.svgStroke path {
  kursor: penunjuk;
  animasi: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prog_btn:hover {
  saiz fon: 1.2rem;
}

.Tambah {
  paparan: inline-block;
  jidar kanan: 0.75rem;
  ketinggian: 1.5rem;
  lebar: 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" >
      <laluan
        stroke-linecap="bulat"
        stroke-linejoin="pusingan"
        d="M12 4.5v15m7.5-7.5j-15"
      ></path>
    </svg>
  </div>
  <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
    <laluan
      d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
      stroke="putih"
      lejang-lebar="2"
    ></path>
  </svg>
</div>

Terdapat juga pautan CodePen di sini.

Answer 1

Saya berharap dapat membatalkan fokus (iaitu kabur) pada penghujung animasi, tetapi ini tidak berjaya.

Berikut ialah penyelesaian yang agak kekok - coretan ini mengalih keluar animasi apabila ia tamat dan menghidupkannya semula apabila terdapat satu lagi acara permulaan sentuh. Ia menggunakan tetapan gaya dan bukannya kelas.

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>