Bootstrap Carousel函数参数

Question

我正在学习一篇关于制作引导转盘动画的教程。但是有一点我不明白，那就是元素是如何与我想要动画的每个部分相关的？例如，函数如何知道elems与html中的某个元素相关？

这是教程，以防您需要更多信息https://www.sitepoint.com/bootstrap-carousel-with-css3-animations/

function doAnimations(elems) {
  var animEndEv = 'webkitAnimationEnd animationend';

  elems.each(function () {
    var $this = $(this),
        $animationType = $this.data('animation');

    // Add animate.css classes to
    // the elements to be animated 
    // Remove animate.css classes
    // once the animation event has ended
    $this.addClass($animationType).one(animEndEv, function () {
      $this.removeClass($animationType);
    });
  });
}

// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
                           .find('[data-animation ^= "animated"]');

// Apply the animation using our function
doAnimations($firstAnimatingElems);

// Pause the carousel 
$myCarousel.carousel('pause');

// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event 
$myCarousel.on('slide.bs.carousel', function (e) { 
  // Select the elements to be animated inside the active slide 
  var $animatingElems = $(e.relatedTarget)
                        .find("[data-animation ^= 'animated']");
  doAnimations($animatingElems);
});

谢谢

Answer 1

bootstrap的slide.bs.carousel事件才能做到这一点。根据轮播事件上引导程序的document，该事件具有名为relatedTarget的属性，该属性包含作为活动项滑入适当位置的DOM元素。

您的教程将进一步查找具有data-animation属性的元素，并在doAnimations(elems)函数中传递它们。通过使用each事件，可以对存储在elems中的元素逐个执行动画。

教程的代码是为第一张幻灯片手动调用doAnimations，但是对于所有连续的幻灯片，bootstrap的事件会处理它。