Заставьте фон исчезать при каждом нажатии - PullRequest
Новая
       8

Заставьте фон исчезать при каждом нажатии

0 голосов
/ 25 марта 2019

Я бы хотел, чтобы DIV показывал подтвержденное сообщение, в котором эффект css «анимация» или «затухание» активируется при каждом нажатии.Он отлично работает при первом клике, но не при последующих кликах.

function clientedetail() {
  document.getElementById("guardadoC").innerHTML = "Guardado.";
  document.getElementById("guardadoC").style.cssText = "animation: background-fade 3s;padding:5px;";
}
@keyframes background-fade {
  0% {
    background-color: green;
  }
  100% {
    background-color: none;
  }
}
<input type="button" onclick="clientedetail()"></input>

<div id="guardadoC"></div>

Ответы [ 4 ]

2 голосов
/ 25 марта 2019

Вы можете добавить addEventListener('animationend', function() { ... }); для сброса анимации, чтобы вы могли запустить ее снова.

Также хорошей идеей будет сохранить свой CSS в своем CSS-файле, а не записывать его в виде строк в JavaScript. Теперь мы добавляем класс к элементу, чтобы делать то, что мы хотим. 

function clientedetail() {
  var el = document.getElementById("guardadoC");
  el.innerHTML = "Guardado.";
  el.classList.add("animating");

  //This function runs when the CSS animation is completed
  var listener = el.addEventListener('animationend', function() {
    el.classList.remove("animating");

    //this removes the listener after it runs so that it doesn't get re-added every time the button is clicked
    el.removeEventListener('animationend', listener);
  });
}
@keyframes background-fade {
  0% {
    background-color: green;
  }
  100% {
    background-color: none;
  }
}

#guardadoC {
  padding:5px;
}

#guardadoC.animating {
  animation: background-fade 3s;
}
<button type="button" onclick="clientedetail()">click me</button>

<div id="guardadoC"></div>
1 голос
/ 25 марта 2019

Вы можете использовать событие animationend для сброса анимации.

Событие animationend вызывается, когда анимация CSS завершена (но не, если оно прерывается до достижения завершения, например,если элемент становится невидимым или анимация удаляется из элемента).

В этой демонстрации вы заметите, что я не использую анонимные функции.С анонимными функциями мы в конечном итоге переопределяем функцию снова и снова, а это не то, что вы хотите от производительности.Используя функциональную ссылку, мы объявляем функцию один раз и привязываем к ней событие. 

const btn = document.querySelector(".myButton");
const guardadoC = document.getElementById("guardadoC");

btn.addEventListener("click", clientedetail);

function clientedetail() {
  guardadoC.innerHTML = "Guardado.";
  guardadoC.style.cssText = "animation: background-fade 3s;padding:5px;";
}

function resetAnimation() {
  guardadoC.innerHTML = "";
  guardadoC.style.cssText = "";
}

guardadoC.addEventListener("animationend", resetAnimation);
@keyframes background-fade {
  0% {
    background-color: green;
  }
  100% {
    background-color: none;
  }
}
<input type="button" class="myButton">
<div id="guardadoC"></div>

jsFiddle

Подробнее об анимации

0 голосов
/ 26 марта 2019

Запускайте его на основании класса, если можете, то, как вы это делаете, он сделает только один раз.

Или вы можете уничтожить элемент и воссоздать его вроде этого. 

function clientedetail() {
    var element =  document.getElementById("guardadoC");
        if (typeof(element) != 'undefined' && element != null)
            {
              document.getElementById("guardadoC").remove();
              var remakeDiv = document.createElement("div");
              remakeDiv.setAttribute("id", "guardadoC");
              document.body.appendChild(remakeDiv)
            }

    document.getElementById("guardadoC").innerHTML = "Guardado.";
    document.getElementById("guardadoC").style.cssText = "animation: background-fade 3s;padding:5px;";
}
0 голосов
/ 26 марта 2019

Вы можете воссоздавать элемент каждый раз, когда нажимаете кнопку. Это будет полный сброс, и он будет работать даже при прерывании предыдущей анимации. 

function clientedetail() {
    var elem = document.getElementById("guardadoC");
    var newElem = elem.cloneNode(true);
    elem.parentNode.replaceChild(newElem, elem);
    newElem.innerHTML = "Guardado.";
    newElem.style.cssText = "animation: background-fade 3s;padding:5px;";
}
@keyframes background-fade {
  0% {
    background-color: green;
  }
  100% {
    background-color: none;
  }
}
<input type="button" onclick="clientedetail()"></input>

<div id="guardadoC"></div>
...