如何为不断变化的图像添加过渡（使用 Javascript）答案

【问题标题】：How to add transition to a changing image (with Javascript)如何为不断变化的图像添加过渡（使用 Javascript）
【发布时间】：2021-01-02 06:20:38
【问题描述】：

我做了一个函数，当我滚动页面时，图像的src 会发生变化。

window.addEventListener("scroll", function () {

    var textPartitionsCercleDiv = document.getElementById("text-partitions-cercle")
    var textPartitionsDistanceFromTop = textPartitionsCercleDiv.getBoundingClientRect().top
    var texteMichelle = document.getElementById("michelle-text")
    var texteMichelleTop = texteMichelle.getBoundingClientRect().top * 0.2

    if (texteMichelleTop > 200) {
        document.getElementById("img-partitions").src = "partition-cercle2.png";
    } else {
        document.getElementById("img-partitions").src = "partition-cercle1.png";
    }
})

我应该在 CSS 的哪个位置添加 transition 属性，以便它从一个图像平滑地更改到另一个图像？我尝试过的一切都无法正常工作。

【问题讨论】：

您不能为图像 src 设置动画或过渡。虽然你可以让它淡出，但改变 src 然后淡入

标签： javascript css sass transition translate-animation

【解决方案1】：

我会采用不同的结构。

插入两个图像，并给它们每个不同的类。使用 Jquery/javascript 来触发进行转换的新类。

$(document).ready(function() {
  $("#eb_onclick").click(function() {
  $("#mycontainer img.top").toggleClass("transparent");
});
});

#mycontainer {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#mycontainer img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#mycontainer img.transparent {
opacity:0;
}
#eb_onclick {
cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="eb_onclick" >Click me to toggle</button>
<div id="mycontainer" class="shadow">

  <img class="bottom" height="100px" src="https://cdn.pixabay.com/photo/2018/07/26/07/45/valais-3562988_960_720.jpg" />
  <img class="top"  height="100px"  src="https://cdn.pixabay.com/photo/2020/06/26/17/16/daisies-5343423_960_720.jpg" />
</div>

【讨论】：