SVG 动画打开按钮

Question

我正在使用 SVG 在按钮上创建动画，以制作我正在使用 .is-loading 和 is.success 的动画，当单击按钮时，动画不会执行，并且我无法识别出哪个错误动画。这是 JavaScript 代码。见下文。var nome = document.getElementById("campo_nome");var altura = document.getElementById("campo_altura");var peso = document.getElementById("campo_peso");const resultado = document.getElementById("campo_enviar");resultado.addEventListener('click', function btn ()  {  resultado.classList.add('is-loading');  setTimeout( () => {    resultado.classList.add('is-success');    resultado.classList.remove('is-loading');    resultado.removeEventListener('click', btn);  }, 4000);});这是CSS代码。见下文。.btn_enviar{  position: absolute;  top: 5px;  right: 110px;  background: none;  color: #000;  border: 1px solid #45981B;  border-radius: 40px;  box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);  cursor: pointer;  height: 45px;  width: 10px;  outline: none;  padding: 15px 70px;  transition: background, padding 500ms ease-in-out;}span{  font-size: 15px;  position: absolute;  top: 12px;  left: 36px;}.btn_enviar.is-loading {  animation: pulse 1.5s infinite;  padding: 15px 7px;}.btn_enviar.is-success {  background: #45981B;  padding: 15px 7px;}svg {  width: 0;  height: 0;}.is-success svg {  height: 30px;  width: 30px;}.check {  stroke-dasharray: 130px 130px;  stroke-dashoffset: 130px;  transition: stroke-dashoffset 500ms ease-in-out;}.is-loading span,.is-success span {  display: none;}.is-success .check {  stroke-dashoffset: 0px;}@keyframes pulse {  0% {    transform: scale(.9);  }  70% {    transform: scale(1);    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);  }  100% {    transform: scale(.9);    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);  }}

Answer 1

你没有任何 id 为的元素，campo_enviar但在你的 javascript 中你已经提到了这一点。查看显示您的错误的代码片段

var nome = document.getElementById("campo_nome");

var altura = document.getElementById("campo_altura");

var peso = document.getElementById("campo_peso");

const resultado = document.getElementById("campo_enviar");

resultado.addEventListener('click', function btn ()  {

  resultado.classList.add('is-loading');

  setTimeout( () => {

    resultado.classList.add('is-success');

    resultado.classList.remove('is-loading');

    resultado.removeEventListener('click', btn);

  }, 4000);

});

.btn_enviar{

  position: absolute;

  top: 5px;

  right: 110px;

  background: none;

  color: #000;

  border: 1px solid #45981B;

  border-radius: 40px;

  box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);

  cursor: pointer;

  height: 45px;

  width: 10px;

  outline: none;

  padding: 15px 70px;

  transition: background, padding 500ms ease-in-out;

}

span{

  font-size: 15px;

  position: absolute;

  top: 12px;

  left: 36px;

}

.btn_enviar.is-loading {

  animation: pulse 1.5s infinite;

  padding: 15px 7px;

}

.btn_enviar.is-success {

  background: #45981B;

  padding: 15px 7px;

}

svg {

  width: 0;

  height: 0;

}

.is-success svg {

  height: 30px;

  width: 30px;

}

.check {

  stroke-dasharray: 130px 130px;

  stroke-dashoffset: 130px;

  transition: stroke-dashoffset 500ms ease-in-out;

}

.is-loading span,

.is-success span {

  display: none;

}

.is-success .check {

  stroke-dashoffset: 0px;

}

@keyframes pulse {

  0% {

    transform: scale(.9);

  }

  70% {

    transform: scale(1);

    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);

  }

  100% {

    transform: scale(.9);

    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);

  }

}

<form class="formulario_btn">

<button type="button" class="btn_limpar" class="btn_limpar"> Limpar </button>

<button type="button" class="btn_enviar" class="btn_enviar">

   <svg viewBox="0 0 90.594 59.714">

    <polyline

      class="check"

      fill="none"

      stroke="#FFFFFF"

      stroke-width="10"

      stroke-miterlimit="10"

      points="1.768,23.532 34.415,56.179 88.826,1.768"

    />

  </svg>

  <span> Resultado </span>  

</button>