Question

我正在关注动画引导旋转木马的教程。但有一点我不明白，那就是elems与我想要动画的每个部分有什么关系？就像函数如何知道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事件。根据carousel事件中bootstrap的document，此事件具有名为relatedTarget的属性，其中包含作为活动项滑入的DOM元素。

您的教程将进一步查找具有data-animation属性的元素，并将其传递给doAnimations(elems)函数。使用each事件，动画将逐一存储在elems中存储的元素上。

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

Bootstrap Carousel功能参数

1 个答案: