Question

嘿伙计我动态添加动画有困难，我基本上只是一个HTML / CSS人，他避免使用JS但偶尔使用Jquery，我知道如何编写jquery代码。所以从根本上来说，我的困难在于我有一个引导carasoul小提琴here：

现在我为carasoul中的图像创建了一个CSS-3动画动画代码如下：

@keyframes scalebg {
  0%{
    -ms-transform:scale(1);
    -o-transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
  }

  100% {
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -webkit-transform:scale(1.3);
    transform:scale(1.3);

  }
}

.scalebg {
  -webkit-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-animation-name: scalebg;
  -o-animation-name: scalebg;
  animation-name: scalebg;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}

我遇到的问题::

现在我真正想要做的是当每个幻灯片出现时我会立即想要将类scalebg显示在该微粒幻灯片中的<img>标签上，问题是我如何检测哪个幻灯片有滑入，如何将类scalebg仅添加到那个特定的幻灯片？那是我面临的挑战..

bootrap documentation确实说bootstrap carasoul暴露了2个事件：

slide.bs.carousel ::幻灯片播放时会立即触发此事件   调用了instance方法。

slid.bs.carousel ::旋转木马时会触发此事件   完成了幻灯片过渡。

但我不确定如何利用这些事件来实现我想要的目标。有人可以指导我。

P.S。 ::

截至目前效果有效，因为我已将以下代码添加到动画中：

animation-iteration-count: infinite;

但那不是我想要动画的方式。

谢谢。

亚历-Z

Answer 1

您可以使用e.relatedTarget来激活元素。

$('#myCarousel').on('slid.bs.carousel', function (e) {
      $('.item').find('img').removeClass('scalebg');
      $(e.relatedTarget).find('img').addClass('scalebg');
})

Fiddle Demo

仅在幻灯片滑入时触发动画

1 个答案: