Vuejs 2 Previous And Next Transition
I'm working on an image slider using Vue 2 transitions. Here is what I have currently using Vue's documentation and Stackoverflow responses : component :
Solution 1:
You could set a conditional class on the $el to figure out if previous button was clicked.
Here i called it isSlidingToPrevious
<template><div:class="'slider' + (isSlidingToPrevious ? ' sliding-to-previous' : '')"><transition-grouptag="div"class="img-slider"name="slide"><divv-for="number in [currentImg]"v-bind:key="number" ><img:src="imgPath+ouvrage.photos[currentImg].photo"/></div></transition-group><divclass="slider-links"><divclass="prev"v-on:click="prevImg"><iclass="glyphicon glyphicon-arrow-left"></i></div><divclass="next"v-on:click="nextImg"><iclass="glyphicon glyphicon-arrow-right"></i></div></div></div></template><script>exportdefault {
data() {
return {
ouvrage : {},
imgPath : '/img/ouvrage/',
currentImg : 0,
isSlidingToPrevious : false,
}
},
mounted() {
axios.post('/api/ouvrage', {
ouvrage: this.$route.params.slug,
}).then(response =>this.ouvrage = response.data);
},
methods : {
//next button is clickednextImg(){
this.isSlidingToPrevious = falseif(this.currentImg == this.ouvrage.photos.length-1){
this.currentImg = 0;
}else{
this.currentImg += 1;
}
},
//previous button is clickedprevImg(){
this.isSlidingToPrevious = trueif(this.currentImg == 0){
this.currentImg=this.ouvrage.photos.length-1;
}else{
this.currentImg-=1;
}
}
}
}
</script>sass
#slider {
overflow: hidden;
}
.slide-leave-active,
.slide-enter-active {
transition: 0.5s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
.sliding-to-previous {
// or whatever you like
.slide-enter {
transform: translate(-100%, 0);
}
.slide-leave-to {
transform: translate(100%, 0);
}
}
Post a Comment for "Vuejs 2 Previous And Next Transition"