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 ()&nbsp; {&nbsp; resultado.classList.add('is-loading');&nbsp; setTimeout( () => {&nbsp; &nbsp; resultado.classList.add('is-success');&nbsp; &nbsp; resultado.classList.remove('is-loading');&nbsp; &nbsp; resultado.removeEventListener('click', btn);&nbsp; }, 4000);});.btn_enviar{&nbsp; position: absolute;&nbsp; top: 5px;&nbsp; right: 110px;&nbsp; background: none;&nbsp; color: #000;&nbsp; border: 1px solid #45981B;&nbsp; border-radius: 40px;&nbsp; box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);&nbsp; cursor: pointer;&nbsp; height: 45px;&nbsp; width: 10px;&nbsp; outline: none;&nbsp; padding: 15px 70px;&nbsp; transition: background, padding 500ms ease-in-out;}span{&nbsp; font-size: 15px;&nbsp; position: absolute;&nbsp; top: 12px;&nbsp; left: 36px;}.btn_enviar.is-loading {&nbsp; animation: pulse 1.5s infinite;&nbsp; padding: 15px 7px;}.btn_enviar.is-success {&nbsp; background: #45981B;&nbsp; padding: 15px 7px;}svg {&nbsp; width: 0;&nbsp; height: 0;}.is-success svg {&nbsp; height: 30px;&nbsp; width: 30px;}.check {&nbsp; stroke-dasharray: 130px 130px;&nbsp; stroke-dashoffset: 130px;&nbsp; transition: stroke-dashoffset 500ms ease-in-out;}.is-loading span,.is-success span {&nbsp; display: none;}.is-success .check {&nbsp; stroke-dashoffset: 0px;}@keyframes pulse {&nbsp; 0% {&nbsp; &nbsp; transform: scale(.9);&nbsp; }&nbsp; 70% {&nbsp; &nbsp; transform: scale(1);&nbsp; &nbsp; box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; transform: scale(.9);&nbsp; &nbsp; box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);&nbsp; }}<form class="formulario_btn"><button type="button" class="btn_limpar" class="btn_limpar"> Limpar </button><button type="button" class="btn_enviar" class="btn_enviar">&nbsp; &nbsp;<svg viewBox="0 0 90.594 59.714">&nbsp; &nbsp; <polyline&nbsp; &nbsp; &nbsp; class="check"&nbsp; &nbsp; &nbsp; fill="none"&nbsp; &nbsp; &nbsp; stroke="#FFFFFF"&nbsp; &nbsp; &nbsp; stroke-width="10"&nbsp; &nbsp; &nbsp; stroke-miterlimit="10"&nbsp; &nbsp; &nbsp; points="1.768,23.532 34.415,56.179 88.826,1.768"&nbsp; &nbsp; />&nbsp; </svg>&nbsp; <span> Resultado </span>&nbsp;&nbsp;</button>