我正在使用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>
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);
}
它工作正常,但每个按钮触发相同的动画(向左滑动)。我的问题是,有什么方法可以在&#34; previous&#34;之前触发不同的动画。单击按钮,滑块向右滑动。
答案 0 :(得分:0)
您可以在$ 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>
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);
}
}