Question

我正在尝试使用 纯JavaScript 为div制作fadeOut效果。

这就是我目前使用的：

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

最初，当没有设置不透明度时，该值将为空字符串，这将导致算术失败。您可以将其默认为1，它将起作用。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1

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功能中的第二个参数。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以使用CSS过渡属性，而不是在javascript中使用vai计时器。与你正在做的相比，这更具有性能导向。

检查

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

Answer 4

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 5

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

Answer 6

您似乎可以用另一种方式（我可能错了）。

corrected = []
correct_format = ['BWx0520BG6,2x','CBZ3132Bu1,3','CKZ3134BR4,2','SJD8575RZ4,2','UES9151GS5,2']
wrong_format = ['BWL0520BG6,1','CBZ3132BR1,2c','CKZ313\\BR4,1','SJD8|75RZ4,1','UES915*GS5,1']

def hamming_distance(s1, s2):
    return sum(c1 != c2 for c1, c2 in zip(s1, s2))

for r in correct_format:
    for i in wrong_format:
        li_r = r.split(',')
        li_i = i.split(',')
        if  hamming_distance(li_r[0], li_i[0]) == 1:
            corrected.append(r)
            wrong_format.remove(i)

Answer 7

除了可接受的答案外，我们现在还有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>

如何使用纯JavaScript制作fadeOut效果

7 个答案: