Vue-carousel: Question: How can I add custom transition effects?

[furyscript]

Is it possible to set custom effect like a simple fade and not just css default transition?

[quinnlangille]

Yeah! There is a transitionEnd and transitionStart hook that you can trigger an animation from. The documentation hasn't been updated with these features, but you can find them here: https://github.com/SSENSE/vue-carousel/blob/e871a2aaec8deec8ee79e399e574c7468a5d2a4f/src/Carousel.vue#L625

[furyscript]

Can you explain me this with an example?
I want to change effect when user click pagination dots.

[quinnlangille]

There is actually an example already in the codebase, if you run the vuePlay dev server you'll see an alert firing on transition in one of the examples. You can find the code for that in play/index.js under the proper title

[furyscript]

Ok I see, but how can I add my custom keyframes / class to element and remove the default transition style?

[mandaputtra]

Still need advice to overide css animation

[mandaputtra]

Just override it, and it done.

.VueCarousel-inner {
  transition: transform 137.333ms ease 0ms !important;
}

.VueCarousel-slide {
  opacity: 0 !important;
  flex-basis: 0;
}

.VueCarousel-slide-active {
  transition: all 0.5s !important;
  opacity: 1 !important;
}

hope this help, the thing is I make the transform more fast, and do fade.

[ckhatton]

@quinnlangille I think you misunderstood what the OP was asking I'm afraid. They were asking how to modify the current transition effect, not to create an additional transition.

@mandaputtra Legend. Thank you! I have tailored it for a smoother animation, so that the change of slide is instant. Also flex-basis brakes the width of my slides.

.VueCarousel-inner {
  transition: none !important;
}

.VueCarousel-slide {
  transition: all 0.5s;
  opacity: 0 !important;
}

.VueCarousel-slide-active {
  opacity: 1 !important;
}

I did find that VueCarousel-slide-active is not added as a class on initial load (I am going to report this as a bug). So I had to add this below to my component script after applying a dynamic "id" to each slide (I couldn't use $refs as the slides are printed out using a v-for loop).

export default {
//...
  mounted: function() {
    document.getElementById('VueCarousel-slide-0').classList.add('VueCarousel-slide-active');
  }
//...
}