tab

<template>
  <div class="wrap">
    <div class="box">
      <span :class="tabIndex==1 && clickFlag?'active1':tabIndex==2 && clickFlag?'active2':' '">
      </span>
      <li class="oLi1" :style="tabIndex==1?'color:#389BFF;':'color:#fff;',tabIndex==1&&!clickFlag?'background:#fff':''" @click="selectChange(1)">1</li>
      <li class="oLi2" :style="tabIndex==2?'color:#389BFF;':'color:#fff;',tabIndex==2&&!clickFlag?'background:#fff':''" @click="selectChange(2)">2</li>
    </div>
    <div class="content">
      <div :class="tabIndex==1 && clickFlag?'subContent1':tabIndex==2 && clickFlag?'subContent2': ''">
        <li class="con1">
          con1
        </li>
        <li class="con2">
          con2
        </li>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        tabIndex: 1,
        clickFlag:false,
      }
    },
    beforeDestroy(){
      this.clickFlag = false;
    },
    methods: {
      selectChange(index) {
        this.tabIndex = index;
        this.clickFlag = true;
      }
    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
.wrap{
  background:#fcc;
}
  @keyframes myconLift {
    from {
      left: -120px;

    }

    to {
      left: 0;

    }
  }

  @keyframes myconRight {
    from {
      right: -120px;

    }

    to {
      right: 0;

    }
  }

  .content {
    margin-left: 100px;
    width: 240px;
    height: 400px;
    text-align:center;
    overflow: hidden;
    position: relative;
  }
  .subContent1,
  .subContent2 {
    width: 480px;
    position: absolute;
  }

  .subContent1 {
    animation: myconLift .5s forwards;
  }

  .subContent2 {
    animation: myconRight .5s forwards;
  }

  .content li {
    float: left;
    height: 400px;
    width: 240px;
  }
  .con1{
    background:#cfc;
  }
   .con2{
    background:#ffc;
  }

  .box {
    background:#389BFF;
    position: relative;
    height:30px;
    padding:10px 0;
    display: inline-block;
    margin: 100px 0 0 100px;
  }

  .box li {
    float: left;
    width: 100px;
    height: 30px;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;

  }

  .oLi2 {
    margin-left: 20px;
  }

  .oLi1 {
    margin-right: 20px;
  }

  @keyframes mymoveLift {
    from {
      left: 0px;
      width: 220px;
    }

    to {
      left: 0;
      width: 100px;
    }
  }

  @keyframes mymoveRight {
    from {
      right: 0px;
      width: 220px;
    }

    to {
      right: 0;
      width: 100px;
    }
  }

  .active1 {
    position: absolute;
    display: inline-block;
    background: #fff;
    height: 30px;
    width: 100px;
    border-radius: 15px;
    animation: mymoveLift .5s forwards;

  }

  .active2 {
    position: absolute;
    display: inline-block;
    background: #fff;
    height: 30px;

    width: 100px;
    border-radius: 15px;
    animation: mymoveRight .5s forwards;

  }

</style>