如何用纯JavaScript制作淡出效果

Question

我正在尝试使用

纯 JavaScript 为 div 制作淡出效果。

这是我目前使用的：

//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

Answer 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>

在进行算术和比较时，空字符串似乎被 JavaScript 视为 0（即使在 CSS 中它将空字符串视为完全不透明）

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1

更简单的方法 我们现在可以使用 CSS transitions 以更少的代码实现淡出

const target = document.getElementById("target");

target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());

#target {
    height: 100px;
    background-color: red;
    transition: opacity 1s;
}

<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>

Answer 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>

Answer 3

看起来你可以用另一种方式来做（我可能错了）。

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

Answer 4

你可以使用 CSS transition 属性而不是在 javascript 中做 vai timer。与您正在做的事情相比，这更注重绩效。

检查

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

Answer 5

除了已接受的答案外，我们现在还有 WAAPI，它基本上将动画 API 添加到 JavaScript。

例如，

/**
 * @returns {Object}
*/
function defaultFadeConfig() {
  return {      
      easing: 'linear', 
      iterations: 1, 
      direction: 'normal', 
      fill: 'forwards',
      delay: 0,
      endDelay: 0
    }  
}

/** 
 * @param {HTMLElement} el
 * @param {number} durationInMs
 * @param {Object} config
 * @returns {Promise}
 */
async function fadeOut(el, durationInMs, config = defaultFadeConfig()) {  
  return new Promise((resolve, reject) => {         
    const animation = el.animate([
      { opacity: '1' },
      { opacity: '0', offset: 0.5 },
      { opacity: '0', offset: 1 }
    ], {duration: durationInMs, ...config});
    animation.onfinish = () => resolve();
  })
}

/** 
 * @param {HTMLElement} el
 * @param {number} durationInMs
 * @param {Object} config
 * @returns {Promise}
 */
async function fadeIn(el, durationInMs, config = defaultFadeConfig()) {
  return new Promise((resolve) => {         
    const animation = el.animate([
      { opacity: '0' },
      { opacity: '0.5', offset: 0.5 },
      { opacity: '1', offset: 1 }
    ], {duration: durationInMs, ...config});
    animation.onfinish = () => resolve();
  });
}

window.addEventListener('load', async ()=> {
  const el = document.getElementById('el1');  
  for(const ipsum of "Neque porro quisquam est qui dolorem ipsum quia dolor \uD83D\uDE00".split(' ')) {
    await fadeOut(el, 1000);  
    el.innerText = ipsum;
    await fadeIn(el, 2000);
  }
});

.text-center {
  text-align: center;
}

<h1 id="el1" class="text-center">...</h1>

Answer 6

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>

Answer 7

我的解决方案

function fadeOut(selector, timeInterval, callback = null) {

    var fadeTarget = document.querySelector(selector);

    let time = timeInterval / 1000;
    fadeTarget.style.transition = time + 's';
    fadeTarget.style.opacity = 0;
    var fadeEffect = setInterval(function() {

        if (fadeTarget.style.opacity <= 0)
        {
            clearInterval(fadeEffect);
            if (typeof (callback) === 'function') {
                callback();
            }
        }
    }, timeInterval);
}

Answer 8

虽然这个和其他 SO 线程中的大多数解决方案都有效，但这是我的两分钱。如果你只想依赖纯 JS 那么这应该可以解决问题：

   function fadeOutEle(el) {
        el.style.opacity = 1;
        (function fade() {
            if ((el.style.opacity -= .009) < 0) {
                el.style.display = "none";
            } else {
                requestAnimationFrame(fade);
            }
        })();
    };

这里的关键是

el.style.opacity -= .009

，它提供了很酷的淡出效果。保持低于 1/2 秒（在本例中为 0.009），以便在元素隐藏之前效果可见。

Answer 9

对于最具交互性的用法，考虑将给定的（基于）函数集成到添加的参数中：

function fadeOut(yourElementId, wishedDuration) {

    const yourElementPath = document.getElementById(yourElementId);

    const fadeTarget = yourElementPath;
    const fadeEffect = setInterval(function () {

        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= .01; //set your own value here 
        } else {
            clearInterval(fadeEffect);
        }
    
    }, wishedDuration);

}

所以你可以这样调用函数：

fadeOut("yourElementId", 1); //second parameter of your choice, accordingly.