javascript - Vanilla javascript，而不是 CSS 或 jQuery，淡入、淡出图像更改

Question

我知道这在 jQuery 中相当容易，但我想用简单的“将永远存在”javascript 来完成此操作。

我的页面上有一个下拉选择。我从 8 个选项中选择一个。页面上显示默认图像。当我选择一个选项时，图像会更改为该图片。一切正常。

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

我拥有的由选择下拉列表中的 onchange="setPicture()"触发的 JavaScript 是:

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

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

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

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