如何在图像之间添加微妙的过渡？

Question

我创建了this问题，并且能够让我的滑块工作。现在我需要在图像之间添加平滑过渡。我在CSS中尝试过渡/动画，但这有一个奇怪的效果 - 图像之间存在黑暗。我认为需要将过渡属性添加到JS中。

当前情况 - 图像突然变化时存在明显差异 期望 - 我希望图片能够轻松进出。

非常感谢任何这方面的帮助！

P.S。 - ＆GT;复制粘贴代码在这里易于使用：

let line = document.getElementById("line");

line.addEventListener("input", function(event){
  setNewImage(event.target.value);
});

function setNewImage(value){
  // console.log(value);
  let currentImage = document.getElementsByClassName("playing");
  let removedImage = currentImage[0].classList.remove("playing");
  let imageToAdd = "image"+value;
  // console.log(imageToAdd);
  
  let getElToAdd = document.getElementsByClassName(imageToAdd);
  
  // console.log(getElToAdd);
  
  let newEl = getElToAdd[0];
  
 newEl.classList.add("playing");
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: lavendar;
  width: 400px;
  height: 300px;
}

.image-container {
  width: 380px;
  height: 280px;
/*   background-color: pink; */
}

.scrollbar {
/*   padding: 0 5px 5px 0; */
}
.scrollbar input {
  width: 380px;
}

ul li {
  list-style: none;
}

.image {
  width: 380px;
  height: 260px;
  display: none;
}

.playing {
  display: block;
}
.image1 {
  background: url('http://placekitten.com/380/260') no-repeat;
}

.image2 {
  background: url('http://placekitten.com/378/260') no-repeat;
}

.image3 {
  background: url('http://placekitten.com/380/259') no-repeat;
}

.image4 {
  background: url('http://placekitten.com/379/260') no-repeat;
}

.image5 {
  background: url('http://placekitten.com/383/260') no-repeat;
}

.image6 {
  background: url('http://placekitten.com/380/261') no-repeat;
}

<div class="container">
  <div class="image-container">
    <ul>
      <li><img class="playing image image1" /></li>
      <li><img class="image image2" /></li>
      <li ><img class="image image3" /></li>
      <li><img class="image image4" /></img></li>
      <li><img class="image image5" /></li>
      <li><img class="image image6"/></li>
    </ul>
  </div>
  <div class="scrollbar">
    <input id="line" type="range" min=1 max =6 />
  </div>
</div>

Answer 1

使用opacity而不是display来添加转换，并使您的元素位置绝对位于彼此之上：

＆＃13;

＆＃13;

let line = document.getElementById("line");

line.addEventListener("input", function(event) {
  setNewImage(event.target.value);
});

function setNewImage(value) {
  // console.log(value);
  let currentImage = document.getElementsByClassName("playing");
  let removedImage = currentImage[0].classList.remove("playing");
  let imageToAdd = "image" + value;
  // console.log(imageToAdd);

  let getElToAdd = document.getElementsByClassName(imageToAdd);

  // console.log(getElToAdd);

  let newEl = getElToAdd[0];

  newEl.classList.add("playing");
}

＆＃13;

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: lavendar;
  width: 400px;
  height: 300px;
}

.image-container {
  width: 380px;
  height: 280px;
}


.scrollbar input {
  width: 380px;
}

ul {
 position:relative; /*make them relative to ul not li*/
 margin:0;
 padding:0;
}
/* added this*/
ul li .image {
  position:absolute;
  top:0;
  left:0;
}
/**/
ul li {
  list-style: none;
}

.image {
  width: 380px;
  height: 260px;
  opacity: 0;
  transition:1s all;
}

.playing {
  opacity:1;
}

.image1 {
  background: url('http://placekitten.com/380/260') no-repeat;
}

.image2 {
  background: url('http://placekitten.com/378/260') no-repeat;
}

.image3 {
  background: url('http://placekitten.com/380/259') no-repeat;
}

.image4 {
  background: url('http://placekitten.com/379/260') no-repeat;
}

.image5 {
  background: url('http://placekitten.com/383/260') no-repeat;
}

.image6 {
  background: url('http://placekitten.com/380/261') no-repeat;
}

＆＃13;

<div class="container">
  <div class="image-container">
    <ul>
      <li>
        <div class="playing image image1"></div>
      </li>
      <li>
        <div class="image image2"></div>
      </li>
      <li>
        <div class="image image3"></div>
      </li>
      <li>
        <div class="image image4"></div>
      </li>
      <li>
        <div class="image image5"></div>
      </li>
      <li>
        <div class="image image6"></div>
      </li>
    </ul>
  </div>
  <div class="scrollbar">
    <input id="line" type="range" min=1 max=6>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;