Les boutons sur mobile restent focalisés ou actifs, provoquant des problèmes avec les animations CSS

Question

J'essaie de créer une animation à chaque fois que je clique sur un bouton. Cela fonctionne bien sur un ordinateur, mais je ne parviens pas à obtenir le même effet sur un mobile. Je dois d'abord cliquer sur le bouton, puis cliquer ailleurs pour défocaliser le CSS, puis cliquer à nouveau sur le bouton pour obtenir l'effet d'animation.

Ce qui suit est un extrait de code.

.btn_container {
  couleur : #35f8ff ;
  position : relative ;
  affichage : bloc en ligne ;
  alignement du texte : centre ;
  marge : 2,5 rem auto ;
}

.prog_btn {
  transformation de texte : majuscule ;
  taille de police : 1,3rem ;
  remplissage : 10px 25px ;
  indice z : 3 ;
  couleur d'arrière-plan : transparent ;
  curseur : pointeur ;
  transition : 0,2 s de relâchement ;
  position : relative ;
  marge : auto ;
}

.btn_container .svgStroke {
  position : absolue ;
  indice z : 1 ;
  largeur : 100 % ;
  haut : -25 % ;
  gauche : 0 ;
}

.btn_container .svgStroke chemin {
  coup-dasharray : 100 ;
  décalage de trait : -800 ;
  largeur de trait : 2 ;
  transition : tous les 1 sont faciles à entrer et à sortir ;
  trait : #35f8ff ;
}

@keyframes tiret {
  0% {
    coup-dasharray : 100 ;
    largeur de trait : 2 ;
  }
  50 % {
    largeur de trait : 4 ;
    trait : #35f8ff ;
    filtre : ombre portée (0px 0px 3px #e8615a) ombre portée (0px 0px 20px #35f8ff) ombre portée (0px 0px 150px #35f8ff);
  }
  100 % {
    décalage de trait : 800 ;
    largeur de trait : 2 ;
  }
}

.prog_btn:hover+.svgStroke chemin {
  curseur : pointeur ;
  animation : tiret 1,5 s cube-bézier (0,25, 0,46, 0,45, 0,94) ;
}

.prog_btn: survol {
  taille de police : 1,2rem ;
}

.ajouter {
  affichage : bloc en ligne ;
  marge droite : 0,75rem ;
  hauteur : 1,5rem ;
  largeur : 1,5 rem ;
}</pré>
<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" >
      <chemin
        trait-linecap="rond"
        trait-linejoin="rond"
        d="M12 4.5v15m7.5-7.5h-15"
      ></chemin>
    </svg> Ajouter 10 %
  </div>
  <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
    <chemin
      d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
      trait = "blanc"
      largeur de trait = "2"
    ></chemin>
  </svg>
</div>

Il existe également un lien CodePen ici.

Answer 1

J'espérais pouvoir annuler la mise au point (c'est-à-dire le flou) à la fin de l'animation, mais cela n'a pas fonctionné.

Voici une solution de contournement légèrement maladroite : cet extrait supprime l'animation lorsqu'elle se termine et la réanime lorsqu'il y a un autre événement touchstart. Il utilise des paramètres de style au lieu de classes.

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>