vuejs 2 previous and next transition

Question

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 :

<template>
    <div class="slider">
        <transition-group tag="div" class="img-slider" name="slide">
            <div v-for="number in [currentImg]" v-bind:key="number" >
                <img :src="imgPath+ouvrage.photos[currentImg].photo"/>
            </div>
        </transition-group>
        <div class="slider-links">
            <div class="prev" v-on:click="prevImg">
                <i class="glyphicon glyphicon-arrow-left"></i>
            </div>
            <div class="next" v-on:click="nextImg">
                <i class="glyphicon glyphicon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ouvrage : {},
                imgPath : '/img/ouvrage/',
                currentImg : 0,
            }
        },
        mounted() {            
            axios.post('/api/ouvrage', {
                ouvrage: this.$route.params.slug,
            }).then(response => this.ouvrage = response.data);
        },
        methods : {
            //next button is clicked
            nextImg(){
                if(this.currentImg == this.ouvrage.photos.length-1){
                    this.currentImg = 0;
                }else{
                    this.currentImg += 1;
                }
            },
            //previous button is clicked
            prevImg(){
                if(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);
}

It works fine but each button triggers the same animation (slide to the left). My question is, is there any way to trigger a different animation when the "previous" button is clicked, so the slider slides to the right.

Answer 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-group tag="div" class="img-slider" name="slide">
            <div v-for="number in [currentImg]" v-bind:key="number" >
                <img :src="imgPath+ouvrage.photos[currentImg].photo"/>
            </div>
        </transition-group>
        <div class="slider-links">
            <div class="prev" v-on:click="prevImg">
                <i class="glyphicon glyphicon-arrow-left"></i>
            </div>
            <div class="next" v-on:click="nextImg">
                <i class="glyphicon glyphicon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        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 clicked
            nextImg(){
                this.isSlidingToPrevious = false
                if(this.currentImg == this.ouvrage.photos.length-1){
                    this.currentImg = 0;
                }else{
                    this.currentImg += 1;
                }
            },
            //previous button is clicked
            prevImg(){
                this.isSlidingToPrevious = true
                if(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);
    }
}