淡入淡出多卡片切换vue

淡入淡出多卡片切换

上图代码如下

 <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