Javascript:在具有淡入淡出效果的循环中更改<img>

Question

我正在制作一个摄影网站，但遇到了困难。我在找人来救我。 我的问题是下一个:我想将下一个代码从 CSS 翻译成 javascript。

img#image {
    margin: 0px;
    background-repeat: none;
    background-size: 100% 100%;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

到目前为止我已经做了:

function Rotate(randomImage) {
            document.getElementById('image').src = randomImage;
            document.getElementById('image').setAttribute("style","height: 100%; width: 100%; position:relative; z-index:-1;    -webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;");
        }

我需要将@-webkit-keyframes fade 和@keyframes fade 添加到我的javascript 代码中。谢谢!

Answer 1

有比使用 JS 更好的方法，但是您可以使用以下方法:

    <div id ="myImg" style="width:100px;height:100px;background:blue;"></div>

<script>
  function fadeIn(from,to,duration) {
      var elem = document.getElementById("myImg"); 
      var step = (to-from)/duration;
      var opacity = from;
      var id = setInterval(frameFade, 5);

      function frameFade() {
          if (opacity >= to) {
              clearInterval(id);
          } else {
              opacity+=step; 
              elem.style.opacity = opacity; 
              elem.innerHtml = opacity;
          }
      }
  }
  fadeIn(0.4,1.0,500);
</script>

plunker example