我已经用vuejs创建了一个滑块,并且我想在其中用vue transition class产生幻灯片效果。我要实现的目的是单击next
按钮时,当前图像滑至底部,而上一张图像也滑至底部并占据当前图像位置。和prev
按钮单击要撤消。我用CSS关键帧定义了此动画,但无法实现实际目标。我相信这是一个css关键帧黑客,无法弄清楚。
这是我的code snippet,您可以找到所有代码。我只是叠放在幻灯片动画上。
<template>
<div id="app">
<div class="slider-wrapper">
<transition
:name="direction == 'next' ? 'slideRightNextImg' : 'slideRightPrevImg'"
>
<div
class="slide-img"
v-for="(image, idx) in this.images"
:key="idx"
v-if="idx == activeIndex"
>
<img :src="image" alt="" />
</div>
</transition>
</div>
<button @click.prevent="toPrev()">Prev</button>
<button @click.prevent="toNext()">Next</button>
</div>
</template>
JavaScript代码
data() {
return {
activeIndex: 0,
direction: null | String,
images: [
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-01-min.jpg",
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-02-min.jpg",
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-03-min.jpg",
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-04-min.jpg",
],
};
},
methods: {
toNext: function () {
const newSlide = this.activeIndex + 1;
if (newSlide < this.images.length) {
this.activeIndex = newSlide;
}
this.direction = "next";
},
toPrev: function () {
const newSlide = this.activeIndex - 1;
if (newSlide < this.images.length && newSlide >= 0) {
this.activeIndex = newSlide;
}
this.direction = "prev";
},
},
用于过渡的CSS代码
.slider-wrapper {
height: 60vh;
width: 50%;
overflow: hidden;
}
.slide-img {
width: 100%;
height: 100%;
transition: transform 1.4s ease;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
button {
margin-top: 20px;
margin-right: 10px;
}
.slideRightNextImg-enter-active {
animation: next-leave 1.4s;
}
.slideRightNextImg-leave-active {
animation: next-leave 1.4s;
}
.slideRightPrevImg-enter,
.slideRightPrevImg-leave-to {
animation: next-enter 1.4s;
}
.slideRightPrevImg-enter-active,
.slideRightPrevImg-leave-active {
animation: next-enter 1.4s reverse;
}
@keyframes next-enter {
100% {
transform: translateY(100%);
}
0% {
transform: translateY(0%);
}
}
@keyframes next-leave {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
预先感谢。