javascript - vuejs 2 上一个和下一个过渡

Question

我正在使用 Vue 2 过渡处理图像 slider 。

这是我目前使用 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>

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

它工作正常，但每个按钮触发相同的动画(向左滑动)。我的问题是，有什么方法可以在单击“上一个”按钮时触发不同的动画，从而使 slider 向右滑动。

Answer 1

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

这里我称之为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>

萨斯

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