Javascript vuejs 2上一次和下一次转换

我正在使用Vue 2转换制作图像滑块

以下是我目前使用Vue的文档和Stackoverflow响应得到的信息：

组成部分：

<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>

---

它工作正常，但每个按钮都会触发相同的动画（向左滑动）。我的问题是，当单击“previous”按钮时，是否有方法触发不同的动画，以便滑块向右滑动。

您可以在$el上设置一个条件类，以确定是否单击了previous按钮

在这里我称之为

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>

---

谢谢，这很管用。我以为会有更好的方法来做这件事，但显然没有。很高兴它有帮助。好。。我想这确实是一个意见问题，但就我个人而言，我更喜欢在vue中使用javascript进行转换。我认为它提供了更多的控制。我试着用这个例子，但对我来说效果不太好，有人能给我一把小提琴吗？

<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>

#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);
    }
}