Schaltflächen auf Mobilgeräten bleiben fokussiert oder aktiv, was zu Problemen mit CSS-Animationen führt

Question

Ich versuche, jedes Mal, wenn ich auf eine Schaltfläche klicke, eine Animation zu erzielen. Auf dem Desktop funktioniert das gut, aber auf Mobilgeräten kann ich nicht den gleichen Effekt erzielen. Ich muss zuerst auf die Schaltfläche klicken, dann auf eine andere Stelle klicken, um das CSS zu defokussieren, und dann erneut auf die Schaltfläche klicken, um den Animationseffekt zu erhalten.

Das Folgende ist ein Codeausschnitt.

.btn_container {
  Farbe: #35f8ff;
  Position: relativ;
  Anzeige: Inline-Block;
  Textausrichtung: Mitte;
  Rand: 2,5rem automatisch;
}

.prog_btn {
  Texttransformation: Großbuchstaben;
  Schriftgröße: 1,3rem;
  Polsterung: 10px 25px;
  Z-Index: 3;
  Hintergrundfarbe: transparent;
  Cursor: Zeiger;
  Übergang: 0,2 s Ease-out;
  Position: relativ;
  Rand: automatisch;
}

.btn_container .svgStroke {
  Position: absolut;
  Z-Index: 1;
  Breite: 100 %;
  oben: -25 %;
  links: 0;
}

.btn_container .svgStroke Pfad {
  Stroke-Dasharray: 100;
  Stroke-Dashoffset: -800;
  Strichstärke: 2;
  Übergang: alle 1er Easy-in-out;
  Strich: #35f8ff;
}

@keyframes Bindestrich {
  0 % {
    Stroke-Dasharray: 100;
    Strichstärke: 2;
  }
  50 % {
    Strichstärke: 4;
    Strich: #35f8ff;
    Filter: Schlagschatten(0px 0px 3px #e8615a) Schlagschatten(0px 0px 20px #35f8ff) Schlagschatten(0px 0px 150px #35f8ff);
  }
  100% {
    Stroke-Dashoffset: 800;
    Strichstärke: 2;
  }
}

.prog_btn:hover+.svgStroke path {
  Cursor: Zeiger;
  Animation: Strich 1,5 s Kubikbezier (0,25, 0,46, 0,45, 0,94);
}

.prog_btn:hover {
  Schriftgröße: 1,2rem;
}

.hinzufügen {
  Anzeige: Inline-Block;
  Rand rechts: 0,75rem;
  Höhe: 1,5rem;
  Breite: 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" >
      <Pfad
        Stroke-Linecap="round"
        Stroke-LineJoin = „Runde“
        d="M12 4,5v15m7,5-7,5h-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">
    <Pfad
      d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
      Strich="weiß"
      Strichbreite="2"
    ></path>
  </svg>
</div>

Hier gibt es auch einen CodePen-Link.

Answer 1

我希望在动画结束时能够取消焦点（即模糊），但这没有起作用。

这是一个稍微笨拙的解决方法 - 这个片段在动画结束时移除了动画，并在有另一个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>