Div мерцание при исчезновении с тайм-аутом - PullRequest
Новая
       25

Div мерцание при исчезновении с тайм-аутом

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

один div я использую как готовый MSG.Он должен появиться после завершения процесса и исчезнуть через несколько секунд.Для этого я написал маленький фрагмент кода: 

function showProcessFinishedMsg(msg) {
    var done_msg = document.getElementById("done_msg");
    var done_msg_text = document.getElementById("done_msg_text");

    done_msg_text.innerHTML = msg;
    unfade(done_msg);
    setTimeout(fade(done_msg),60000);
  }

  //fading in
  function unfade(element) {
      var op = 0.1;  // initial opacity
      element.style.display = 'block';
      var timer = setInterval(function () {
          if (op >= 1){
              clearInterval(timer);
          }
          element.style.opacity = op;
          element.style.filter = 'alpha(opacity=' + op * 100 + ")";
          op += op * 0.1;
      }, 10);
  }

  //fading out
  function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}
.done_msg {
	height: 50px;
	width: 80%;
	left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
	position: absolute;
  bottom: 20px;
  background-color: #212121;
  border-radius: 8px;
  box-shadow: 1px 1px 5px #0d0d0d;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.done_msg_text {
	padding-left: 30px;
	color: #ffffff;
}
<div class="done_msg" id="done_msg" style="display: none;">
  <img src="./done.png" width="33px" height="auto">
  <p class="done_msg_text" id="done_msg_text">icbsiudbisbdvoaodvnoda</p>
</div>

<button onclick="showProcessFinishedMsg('Maybe it works, in a different universe.')">Testbutton</button>

Но, как вы видите, у меня проблема в том, что она работает не гладко.И это так странно мерцает.Надеюсь, что кто-нибудь может мне помочь.
~ filip

1 Ответ

1 голос
/ 09 марта 2019

Ваша проблема с: 

setTimeout(fade(done_msg), 60000);

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

Предполагается, что первый параметр setTimeout - это функция, которая может быть выполнена, однако вы выполняете функцию сразу, и поэтому вы устанавливаете первый аргумент, равный возвращаемому значению fade, что undefined.

Это заставляет ваши функции unfade и fade работать одновременно, вызывая мерцание.Вместо этого оберните fade(done_msg) в свою собственную функцию: 

setTimeout(_ => fade(done_msg), 60000);

См. Рабочий пример ниже: 

function showProcessFinishedMsg(msg) {
  var done_msg = document.getElementById("done_msg");
  var done_msg_text = document.getElementById("done_msg_text");

  done_msg_text.innerHTML = msg;
  unfade(done_msg);
  setTimeout(_ => fade(done_msg), 2000);
}

//fading in
function unfade(element) {
  var op = 0.1; // initial opacity
  element.style.filter = 'alpha(opacity=' + op * 100 + ")";
  element.style.display = 'flex';
  var timer = setInterval(function() {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}

//fading out
function fade(element) {
  var op = 1; // initial opacity
  var timer = setInterval(function() {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op -= op * 0.1;
  }, 50);
}
.done_msg {
  height: 50px;
  width: 80%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 20px;
  background-color: #212121;
  border-radius: 8px;
  box-shadow: 1px 1px 5px #0d0d0d;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.done_msg_text {
  padding-left: 30px;
  color: #ffffff;
}
<div class="done_msg" id="done_msg" style="display: none;">
  <img src="./done.png" width="33px" height="auto">
  <p class="done_msg_text" id="done_msg_text">icbsiudbisbdvoaodvnoda</p>
</div>

<button onclick="showProcessFinishedMsg('Maybe it works, in a different universe.')">Testbutton</button>
...