vuejs 2上一個和下一個轉換

Question

我正在使用Vue 2轉換處理圖像滑塊。

這裏是我目前使用Vue公司的文檔和＃2的響應：

組件：

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

它工作正常，但每個按鈕觸發相同的動畫（向左滑動）。我的問題是，點擊「上一個」按鈕時是否有任何方法觸發不同的動畫，因此滑塊向右滑動。

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