Vanilla javascript，不是 CSS 或 jQuery，淡入淡出图像变化答案

【问题标题】：Vanilla javascript, not CSS or jQuery, fade in, fade out image changeVanilla javascript，不是 CSS 或 jQuery，淡入淡出图像变化
【发布时间】：2019-05-16 00:44:09
【问题描述】：

我知道这在 jQuery 中相当容易，但我想用普通的“将永远存在”javascript 来做到这一点。

我的页面上有一个下拉选择。我选择了 8 个选项之一。页面上显示了默认图像。当我选择一个选项时，图像将变为该图片。一切正常。

但我想让图像变成淡出，淡入切换，因为我和你们大多数人一样，不能独自离开。我们必须继续摆弄。

我拥有的 javascript 是由选择下拉菜单上的 onchange="setPicture()" 触发的：

function setPicture(){
    var img = document.getElementById("mySelectTag");
    var value = img.options[img.selectedIndex].value;
    document.getElementById("myImageDiv").src = value;
}

这很好用。所选索引的值是一个字符串，其中包含每个图像的路径。我只想淡出然后淡入卡在某个地方。我摆弄了一下，在更改 src 之前调用了另一个函数，但没有运气。

有人能指出我正确的方向吗？

【问题讨论】：

CSS3 Transition - Fade out effect的可能重复
原生淡入淡出（实际上，jQuery 淡入淡出，在幕后）依赖于间隔和递增或递减元素的 opacity 属性。利用 CSS3 过渡会容易得多。
So css 过渡不透明度

标签： javascript image fadein fade fadeout

【解决方案1】：

更简单的方法是单独使用css keyframes。

但是在 javascript 中，web animation api 就是为此而生的。

这是示例中的快速修改，以匹配您的情况。

function setPicture(){
 alice.animate(
  [
    { opacity: 1 },
    { opacity: .1},
    { opacity: 1 }
  ], {
    duration: 3000,
    iterations: Infinity
  }
 )
}

<button onclick="setPicture()">
  OPACITY ANIMATION
   </button>

<img id="alice" 
     src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif"
     >
  </img>

【讨论】：

【解决方案2】：

如何设置不透明度为 0 和过渡时间的图像默认 CSS 然后在 JavaScript 中添加一个将不透明度设置为 1 的类

HTML: 
    <img class="img1" src="sampleimg.jpg">

CSS: 
    .img1 {
        opacity: 0;
        transition: all .3s;
    }
    .img1.show {
        opacity: 1;
    }

JS:
    function setPicture() {
        var img = document.querySelector('.img1');
        img.src = 'urlofnewimage';
        img.classList.add('show');
    }

希望这会有所帮助。

【讨论】：

【解决方案3】：

只需一个功能：

function fadeOutEffect(target) {
    var fadeTarget = document.getElementById(target);
    fadeTarget.style.opacity = 1;
    fadeTarget.style.transition = "opacity 2s";
    fadeTarget.style.opacity = 0;
    setTimeout(function(){
        fadeTarget.style.display = "none";
    }, 2000);;
}

【讨论】：