手机上的按钮保持焦点或活动状态，导致CSS动画出现问题

Question

我正在尝试在每次点击按钮时实现动画效果，它在桌面上运行良好，但在手机上无法实现相同效果。我必须先点击按钮，然后点击其他地方以取消CSS的焦点状态，然后再次点击按钮以获得动画效果。

以下是代码片段。

.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;
  animation: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.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> Add 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>

这里还有CodePen链接。

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>