CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alexander Solonik
Alexander Solonik

Reputation: 10230

Triggering animation only when slide slide's in

I have a difficulty adding animations dynamically, I am basically just a HTML/CSS developer who avoids JS but uses jQuery occasionally. I know how to write jQuery code though. My difficulty is that I have a Bootstrap carousel Fiddle.

Now I have created a CSS-3 animation for the images in the carousel. The animation code is below:

@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;
}

Issue

Now what I would really like to do is when each slide appears I would immediately like the class scalebg to be appeared to the <img> tag in that particular slide. How do I detect which particular slide has slided in and how do I add the class scalebg only to that particular slide?

The Bootstrap documentation does say that the Bootstrap carousel exposes 2 events:

slide.bs.carousel :: This event fires immediately when the slide instance method is invoked.

slid.bs.carousel :: This event is fired when the carousel has completed its slide transition.

But I am not sure how I can use these events to accomplish what I want.

Post Script

As of now the effect works because I have added the following code to the animation:

animation-iteration-count: infinite;

but that's not how I would like the animation to be.

Upvotes: 0

Views: 58

Answers (1)

anpsmn
anpsmn

Reputation: 7257

You can use e.relatedTarget for the element to be active.

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

Fiddle Demo

Upvotes: 1

Related Questions