Как сделать эффект fadeOut с помощью чистого JavaScript

Я пытаюсь сделать эффект fadeOut для div с чистым JavaScript.

Это то, что я сейчас использую:

//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
 var fadeTarget = document.getElementById("target");
 var fadeEffect = setInterval(function() {
  if (fadeTarget.style.opacity < 0.1)
  {
   clearInterval(fadeEffect);
  }
  else
  {
   fadeTarget.style.opacity -= 0.1;
  }
 }, 200);
}

Div должен исчезнуть плавно, но он немедленно исчезнет.

Что не так? Как я могу решить это?

jsbin

Ответы

Ответ 1

Первоначально, когда непрозрачность не установлена, значение будет пустой строкой, что приведет к сбою вашей арифметики. То есть "" < 0.1 == true и ваш код переходит в ветку clearInterval.

Вы можете установить значение по умолчанию 1, и оно будет работать.

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);

#target {
    height: 100px;
    background-color: red;
}

<div id="target">Click to fade</div>

Ответ 2

Только сегодня утром я нашел этот фрагмент кода на http://vanilla-js.com, он очень простой, компактный и быстрый:

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

Вы можете изменить скорость замирания, изменив второй параметр в функции setTimeOut.

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

Ответ 3

вы можете использовать свойство перехода CSS вместо выполнения таймера vai в javascript. это больше ориентировано на производительность по сравнению с тем, что вы делаете.

проверить

http://fvsch.com/code/transition-fade/test5.html#test3

Ответ 4

Похоже, вы можете сделать это по-другому (я могу ошибаться).

event.target.style.transition = '0.8s';
event.target.style.opacity = 0;

Ответ 5

    var op = 1;
    var element = document.getElementById('exitModal');
    function closeModal() {
        window.setInterval(function(){
            element.style.opacity = op;
            op = op - 0.01;
        },10);