1.代码
<tempalte>
<div class="img-div">
<transition name="slide">
<ul v-if="isShow">
<li>
<img :src="items[2 * index ].url" >
</li>
<li>
<img :src="items[2 * index + 1].url" >
</li>
</ul>
</transition>
<transition name="slideLeave">
<ul v-if="!isShow">
<li>
<img :src="items[2 * index ].url" >
</li>
<li>
<img :src="items[2 * index + 1].url" >
</li>
</ul>
</transition>
</div>
</tempalte>
<script>
export default {
mounted (){
this.isShow = true
++ this.index
setInterval(()=>{
this.isShow = false
setTimeout(() => {
this.isShow = true
++ this.index
if(this.index == 3){
this.index = 0
}
}, 10)
},2000)
},
data () {
return {
items:[
{
'url':require("../../assets/3.jpg"),
},
{
'url':require("../../assets/4.jpg"),
},
{
'url':require("../../assets/5.jpg"),
},
{
'url':require("../../assets/6.jpg"),
},
{
'url':require("../../assets/7.jpg"),
},
{
'url':require("../../assets/8.jpg"),
},
],
isShow:false,
index:0
}
},
}
<style>
.slide-enter{
transform:translateY(400px);
}
.slide-enter-active,.slideLeave-leave-active{
transition: all 2s;
}
.slideLeave-leave-to{
transform:translateY(-400px);
}
</style>
2效果图
我做的是两张图片一起滚动的，也可以换成单张或任意多张
image.png
