vue transition 实现手机图片轮播

Vue Transition 可以使用 CSS3 实现手机图片轮播效果，具体实现可以参考以下代码：

HTML 代码：

<div id="app">
<transition-group tag="div" name="fade" class="slide">
<div v-for="(item, index) in items" :key="index" class="slide-item">
<img :src="item">
</div>
</transition-group>
</div>

CSS3 代码：

.slide {
position: relative;
height: 200px;
overflow: hidden;
}

.slide-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}

.slide-enter-active, .slide-leave-active {
transition: all .5s;
}

.slide-enter, .slide-leave-to {
opacity: 0;
transform: translateX(100%);
}

Vue 代码：

new Vue({
el: '#app',
data: {
items: [
'https://img.csdn.net/article/202002/13/1581604305271189.jpg',
'https://img.csdn.net/article/202002/13/1581604305817583.jpg',
'https://img.csdn.net/article/202002/13/1581604306340235.jpg',
'https://img.csdn.net/article/202002/13/1581604306819455.jpg'
]
}
});