<template>
<div>
<div class="box">
<div
v-for="item,index in list"
:key="index"
class="item"
:class="{
'prev': index === 0,
'prev-to-right': index === 0 && action === 'toNext',
'current': index === 1,
'current-to-right': index === 1 && action === 'toNext',
'current-to-left': index === 1 && action === 'toPrev',
'next': index === 2,
'next-to-left': index === 2 && action === 'toPrev'
}"
>
{{item}}
</div>
<div class="prev-btn page-btn" @click="toPrevPage">prev</div>
<div class="next-btn page-btn" @click="toNextPage">next</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [1,2,3],
action: '',
running: false
}
},
methods: {
// 切换到上一个
toPrevPage() {
if (this.running) return
this.running = true
this.action = 'toPrev'
let timer = setTimeout(() => {
this.list.shift()
this.list.push(Math.random() * 10)
this.action = ''
clearTimeout(timer)
this.running = false
}, 1000)
},
// 切换到下一个
toNextPage() {
if (this.running) return
this.running = true
this.action = 'toNext'
let timer = setTimeout(() => {
this.list.pop()
this.list.unshift(Math.random() * 10)
this.action = ''
clearTimeout(timer)
this.running = false
}, 1000)
}
}
}
</script>
<style scoped lang="scss">
.box {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
margin: 100px auto;
.item {
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
&.prev {
transform: translateX(-100%);
}
&.next {
transform: translateX(100%);
}
}
.prev-to-right {
animation: prevFadeToRight 1s .2s ease both;
}
.current-to-right {
animation: currentFadeToRight 1s .2s ease both;
}
.current-to-left {
animation: currentFadeToLeft 1s .2s ease both;
}
.next-to-left {
animation: nextFadeToLeft 1s .2s ease both;
}
@keyframes prevFadeToRight {
0% { transform:translateX(-100%); }
100% { transform:translateX(0%); }
}
@keyframes currentFadeToRight {
0% { transform:translateX(0%); }
100% { transform:translateX(100%); }
}
@keyframes currentFadeToLeft {
0% { transform:translateX(0%); }
100% { transform:translateX(-100%); }
}
@keyframes nextFadeToLeft {
0% { transform:translateX(100%); }
100% { transform:translateX(0%); }
}
.page-btn {
position: absolute;
top: 20%;
transform: translateY(-50%);
cursor: pointer;
&.prev-btn {
left: 20px;
}
&.next-btn {
right: 20px;
}
}
}
</style>
vue 轮播图实现
最新推荐文章于 2024-08-16 23:32:06 发布