图像在引导滑块延迟后出现

Question

我对 JS 还是很陌生，还在学习它。

我有一个引导滑块，每张幻灯片上都有图像。 我想要做的是让图像在幻灯片（所述图像所在的幻灯片）上稍作延迟后出现。 到目前为止，我只使用了第一张幻灯片，如果我将我的课程应用于幻灯片上的其他图像，它们将在文档准备好时出现，而不是在幻灯片上。

到目前为止，我的 JS 看起来是这样的：

$(document).ready(function() { 
  $('.foo').hide().delay(1).fadeIn(2200); 
});

因此，延迟后一切都会淡出。 如何隔离淡入以仅在用户转到所述幻灯片时应用它？

抱歉，如果我不是 100% 清楚，请随时告诉我。

Answer 1

我假设您使用了默认的引导轮播，我已经采用了一种快速而肮脏的方法，也可以帮助您了解我在做什么。

首先，我选择用于更改图像的两个按钮，并将它们放在一个数组中循环它们并将fadeIn 函数添加到其单击处理程序中，这意味着当它单击时将触发fadeIn。

现在我们需要定义fadeIn，fadeIn遍历所有图像并添加将处理样式和动画的类淡入我们添加事件处理程序“transitionend”以在动画停止时触发我们删除该类为下一场火灾做好准备。

我们可以走得更远，确保将类添加到即将过渡的图像中，我们可以在 css 中使用 animation-delay 添加延迟，但这个基本示例应该可以帮助您找到自己的方式。

用到的东西：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

Using CSS for fade-in effect on page load

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

const next = document.querySelector('.carousel-control-next');
const prev = document.querySelector('.carousel-control-prev');
const images = document.querySelectorAll('.carousel-item');
const buttons = [next, prev];

buttons.forEach(el => {
  el.onclick = fadeIn
});


function fadeIn() {
  images.forEach(image => {  
    image.classList.add('fade-in');
    image.addEventListener('transitionend', (e) => image.classList.remove('fade-in'));
  });
}

.fade-in {
  -webkit-animation: fadein 4s;
  animation: fadein 4s;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>