Question

我正在为我的一个项目使用图像滑块，但我一直被困在这里-每次单击缩略图时，主图像都必须带有一些淡入淡出的动画。知道我在哪里做错了。第一次加载页面时，将应用类“淡入淡出”，但保持不变后，淡入淡出将不起作用。有任何线索吗？

HTML

 var el = document.getElementById("ImageSlider");
        //var removefadein = document.querySelector(".fade-in");
        function imgSlider(newimage) {
            el.src = newimage;
             //el.classList.add("fade-in");
        }
        //el.delay('5000').classList.remove("fade-in");
        //removefadein.classList.remove("fade-in");

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Nunito', sans-serif;
        font-size: 18px;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Noto Serif', serif;
    }
    section {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section #ImageSlider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    section ul.thumbnails {
        position: absolute;
        bottom: 50px;
        left: 50%;
        display: flex;
        transform: translateX(-50%);
        justify-content: center;
        align-items: center;
        list-style: none;
        z-index: 999;
    }
    section ul.thumbnails li {
        margin: 1em;
        cursor: pointer;
    }
    section ul.thumbnails li img {
        border: 2px solid black;
        max-height: 5em;
        padding: 0;
        margin: 0;
    }
    .fade-in {
       animation: fadein 4s;
        -moz-animation: fadein 4s; /* Firefox */
        -webkit-animation: fadein 4s; /* Safari and Chrome */
        -o-animation: fadein 4s; /* Opera */
    }
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }

<section>
        <img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider">
        <ul class="thumbnails">
            <li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li>
            <li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li>
        </ul>
    </section>

Answer 1

对此背后的逻辑不是很确定，但这是一个有效的解决方案：也许其他人可以更好地解释它。

修复逻辑是您必须单击：

再次获取元素
检查不透明度，如果不透明度大于0，则将其设置回0
删除淡入淡出类并稍加延迟即可重新应用（不能与删除同时生效）

我认为您的问题是加载时可见元素从0-1开始。然后您没有将其设置回0，您的动画类也没有这样做，它只是说要从0到1进行动画处理，但是没有从0开始的不透明度。

var el = document.getElementById("ImageSlider");

function imgSlider(newimage) {
  el = document.getElementById("ImageSlider");
  el.src = newimage;
  console.clear();
  console.log(window.getComputedStyle(el).opacity);
  if (window.getComputedStyle(el).opacity > 0) {
    console.log(true);
    el.style.opacity = 0;
    el.classList.remove("fade-in");
    setTimeout(function() {
      el.classList.add("fade-in");
      el.style.opacity = 1;
    }, 100);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Serif', serif;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section #ImageSlider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section ul.thumbnails {
  position: absolute;
  bottom: 50px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  justify-content: center;
  align-items: center;
  list-style: none;
  z-index: 999;
}

section ul.thumbnails li {
  margin: 1em;
  cursor: pointer;
}

section ul.thumbnails li img {
  border: 2px solid black;
  max-height: 5em;
  padding: 0;
  margin: 0;
}

.fade-in {
  animation: fadein 4s;
  -moz-animation: fadein 4s;
  /* Firefox */
  -webkit-animation: fadein 4s;
  /* Safari and Chrome */
  -o-animation: fadein 4s;
  /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<section>
  <img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider">
  <ul class="thumbnails">
    <li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li>
    <li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li>
  </ul>
</section>

动画中的图像滑块淡入淡出

1 个答案: