Open furyscript opened 6 years ago
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
Can you explain me this with an example? I want to change effect when user click pagination dots.
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
Ok I see, but how can I add my custom keyframes / class to element and remove the default transition style?
Still need advice to overide css animation
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.
@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');
}
//...
}
Is it possible to set custom effect like a simple
fade
and not just css default transition?