标签：动画 Vue translateX transform height width tab active out

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。