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

Question

我制作了一个功能，当我滚动页面时，图像的 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 属性以便它从一张图片平滑地切换到另一张图片？我尝试过的所有方法都无法正常工作。

Answer 1

我会采用不同的结构。

插入两张图片，给它们各不相同class。使用 Jquery/javascript 触发新的 class 进行转换。

$(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>

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

How to add transition to a changing image (with Javascript)

javascript

css

sass

transition

translate-animation