时间戳

首页 > 解决方案 > 图像滑块淡入动画

javascript - 图像滑块淡入动画

问题描述

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

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>

标签： javascripthtmlcss

解决方案

不太确定这背后的逻辑，但这是一个有效的修复：也许其他人可以更好地解释它。

修复逻辑是你必须点击：

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

我认为您的问题是您在加载时具有 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>

推荐阅读