Buttons on mobile remain focused or active, causing issues with CSS animations

Question

I'm trying to achieve an animation every time I click a button, it works fine on desktop but I can't achieve the same effect on mobile. I have to click the button first, then click somewhere else to de-focus the CSS, then click the button again to get the animation effect. Below is the code snippet. .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉493534105 · Answer

I was hoping to be able to cancel focus (i.e. blur) at the end of the animation, but this didn't work.

This is a slightly clumsy workaround - this snippet removes the animation when it ends, and re-animates when there is another touchstart event. It uses style settings instead of 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;
}


  
     添加 10%