vuejs 2 上一个和下一个转换
[英] vuejs 2 previous and next transition
本文介绍了vuejs 2 上一个和下一个转换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Vue 2 过渡处理图像滑块.
这是我目前使用 Vue 的文档和 Stackoverflow 响应的内容:
组件:
<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"/>
</transition-group><div class="slider-links"><div class="prev" v-on:click="prevImg"><i class="glyphicon glyphicon-arrow-left"></i>
<div class="next" v-on:click="nextImg"><i class="glyphicon glyphicon-arrow-right"></i>
<脚本>导出默认{数据() {返回 {广告 : {},imgPath : '/img/ouvrage/',当前图像:0，}},安装(){axios.post('/api/ouvrage', {ouvrage: this.$route.params.slug,}).then(response => this.ouvrage = response.data);},方法 : {//点击下一步按钮下一个图像(){if(this.currentImg == this.ouvrage.photos.length-1){this.currentImg = 0;}别的{this.currentImg += 1;}},//上一个按钮被点击上一个图像(){如果(this.currentImg == 0){this.currentImg=this.ouvrage.photos.length-1;}别的{this.currentImg-=1;}}}}
SASS:
#slider {溢出:隐藏；}.slide-leave-active,.slide-enter-active {过渡:0.5s；}.slide-enter {变换:翻译(100%，0)；}.slide-leave-to {变换:翻译(-100%，0)；}
它工作正常，但每个按钮触发相同的动画(向左滑动).我的问题是，有没有办法在点击上一个"按钮时触发不同的动画，使滑块向右滑动.
解决方案
你可以在 $el 上设置一个条件类来判断上一个按钮是否被点击.
这里我称之为isSlidingToPrevious
<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"/>
</transition-group><div class="slider-links"><div class="prev" v-on:click="prevImg"><i class="glyphicon glyphicon-arrow-left"></i>
<div class="next" v-on:click="nextImg"><i class="glyphicon glyphicon-arrow-right"></i>
<脚本>导出默认{数据() {返回 {广告 : {},imgPath : '/img/ouvrage/',当前图像:0，isSlidingToPrevious : 假，}},安装(){axios.post('/api/ouvrage', {ouvrage: this.$route.params.slug,}).then(response => this.ouvrage = response.data);},方法 : {//点击下一步按钮下一个图像(){this.isSlidingToPrevious = falseif(this.currentImg == this.ouvrage.photos.length-1){this.currentImg = 0;}别的{this.currentImg += 1;}},//上一个按钮被点击上一个图像(){this.isSlidingToPrevious = 真如果(this.currentImg == 0){this.currentImg=this.ouvrage.photos.length-1;}别的{this.currentImg-=1;}}}}
sass
#slider {溢出:隐藏；}.slide-leave-active,.slide-enter-active {过渡:0.5s；}.slide-enter {变换:翻译(100%，0)；}.slide-leave-to {变换:翻译(-100%，0)；}.滑动到上一个{//或者任何你喜欢的.slide-enter {变换:翻译(-100%，0)；}.slide-leave-to {变换:翻译(100%，0)；}}
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.
解决方案
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);
}
}
这篇关于vuejs 2 上一个和下一个转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
