淡入淡出多卡片切换
上图代码如下
<template>
<div class="content">
<h4>多卡片切换</h4>
<!-- name="slide-fade"对应
.slide-fade-enter-active .slide-fade-leave-active .slide-fade-leave-active .slide-fade-enter
等几个类名,如果没有设置name,则对应.v-enter-active .v-leave-to等 -->
<transition name="slide-fade">
<div class="card" :style="`background:${cardInfo.color}`" :key="cardInfo.key" @click="changeDocState()">
<div class="card-top">{{cardInfo.title}}</div>
<div class="card-body">{{cardInfo.content}}</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
key: 1,
show: true,
velocityShow: false,
cardInfo: { key: 'card1', title: '卡片1', content: '卡片1内容', color: 'lightgoldenrodyellow' },
cardList: [
{ key: 'card1', title: '卡片1', content: '卡片1内容', color: 'lightgoldenrodyellow' },
{ key: 'card2', title: '卡片2', content: '卡片2内容', color: 'lightpink' },
{ key: 'card3', title: '卡片3', content: '卡片3内容', color: 'lightblue' },
],
index: 0,
}
},
methods: {
changeDocState() {
console.log('切换')
this.index = (this.index + 1) % this.cardList.length
this.cardInfo = this.cardList[this.index];
},
}
}
</script>
<style>
.content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
width: 500px;
height: 800px;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 5px 5px 3px #888888;
/* 定位采用absolute,避免出现动画不流畅的问题 */
position: absolute;
top: 60px;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
/* 推荐移入和移出的运动曲线保持一致 */
.slide-fade-enter-active {
transition: all .5s ease-in-out;
}
.slide-fade-leave-active {
transition: all .5s ease-in-out;
}
/* 移入前和移出后状态 */
.slide-fade-enter {
transform: translateX(500px);
opacity: 0;
}
.slide-fade-leave-to
/*.slide-fade-leave-active 用于 2.1.8 以下版本 */{
transform: translateX(-500px);
opacity: 0;
}
</style>
参考链接
vue官方-列表过渡 https://cn.vuejs.org/v2/guide/transitions.html