Vue框架实现tab栏的动画切换效果

Vue框架实现tab栏的动画切换效果

<template>
<!--  vue实现tab栏切换 并且带有动画切换效果-->
  <div class="box">
  <span class="tabchange" v-for="(item,index) in list" :key="index" @click="change(index)">
    {{item.name}}
  </span>
    <div class="flex">
    <transition appear name="test1">
      <div class="tab1" v-if="active == 0"></div>
    </transition>
    <transition appear name="test2">
      <div class="tab2" v-if="active == 1"></div>
    </transition>
    <transition appear name="test3">
      <div class="tab3" v-if="active == 2"></div>
    </transition>
      </div>
  </div>
</template>
<script>
export default {
  name: "PageDetail.vue",
  data:function(){
    return{
      list:[
        {
          name:'第一个tab栏'
        },
        {
          name:'第二个tab栏'
        },
        {
          name:'第三个tab栏'
        }
      ],
      active:0,
    }
  },
  methods:{
    change(index){
      this.active = index;
    }
  }

}
</script>

<style scoped>

.box{
  width: 500px;
  height: 500px;
}
.tabchange{
  width: 100px;
  height: 50px;
  border-right: 1px solid #2CC3D4;
  text-align: center;
  line-height: 50px;
}
.tab1{
  width: 500px;
  height: 300px;
 background-color: #2CC3D4;
  display: inline-block;
}
.tab2{
  width: 500px;
  height: 300px;
  background-color: #070F3D;
  display: inline-block;
}
.tab3{
  width: 500px;
  height: 300px;
  background-color: #00a854;
  display: inline-block;
}
.test1-enter-active{
  animation: move1 .5s ease-out;
}
.test2-enter-active{
  animation: move2 .5s ease-out;
}
.test3-enter-active{
  animation: move3 .5s ease-out;
}
.test1-leave-active{
  animation: move4  ease-out;
}
.test2-leave-active{
  animation: move4  ease-out;
}
.test3-leave-active{
  animation: move4  ease-out;
}

@keyframes move1{
  from{
    transform: translateX(100%);
  }

  to{
    transform: translateX(0px);
  }
}
@keyframes move3{
  from{
    transform: translateX(100%);
  }

  to{
    transform: translateX(0px);
  }
}

@keyframes move2{
  from{
    transform: translateX(100%);
  }

  to{
    transform: translateX(0px);
  }
}
@keyframes move4{
  from{
    transform: translateX(0px);
  }

  to{
    transform: translateX(-100%);
  }
}
.flex{
  display: flex;
  width: 500px;
}
</style>

标签：动画,Vue,translateX,transform,height,width,tab,active,out
来源： https://blog.csdn.net/qq_44316317/article/details/120399279