vue使用css3实现选项卡动画切换

我们先来看看实现的效果

效果是鼠标放上去的时候，会出现一个下边框，并且这个下边框会从中间往两边撑开的动画，鼠标划出来后下边框又会从两边往中间慢慢缩短并消失的效果。

好呐我们来看看代码

首先我们写好一个循环的li标签，v-for，指定的:key值， @mouseover鼠标放上去的事件，@mouseout鼠标划出来的事件。

<li 
v-for="(item,index) in listIndex" 
:key="index" 
@mouseover="navShow(index)" 
@mouseout="dboShow(index)">
  <a class="nav-link" href="#">{{item}}
    <div class="spanClass" 
    :class="{borderTwoClass:spanTwoClass==index,borderThreeClass:spanThreeClass==index}">
    </div>
  </a>
</li>

list数组的值

 return {
   spanTwoClass:-1,
   spanThreeClass:-1,
   listIndex:[
     '首页',
     '关于我'
   ]
 }

请留意li标签里有个div，div里有个:class，为什么有class和:class呢，:class是v-bind:class的简写，具体啥意思呢相信了解vue的人都能经常用到，如果你不知道那建议先去学学vue基础，要是你用不到vue又想实现这个效果，当然也可以实现，加我V吧hua658818。
接着来看代码

:class="{borderTwoClass:spanTwoClassindex,borderThreeClass:spanThreeClassindex}"

解释一下

borderTwoClass是一个css样式，实际上是对li标签里的div做出的样式，样式是啥意思呢，这个样式是中间往两边撑开的效果，我们来看看代码。不太熟悉css3的，可以浏览这个网址过一遍 https://www.runoob.com/css3/css3-animations.html

.borderTwoClass{
    background: #fff;
    width: 80%;
    animation:myfirst 0.3s;				/* 定义动画名*/
    -webkit-animation:myfirst 0.3s;		/* webkit内核的浏览器*/
}
@keyframes myfirst						/*执行动画（一定要仔细看，懂css的人就能看得懂）*/
{
    0%   {background: #fff;width:0%;}
    25%   {background: #fff;width:20%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:60%;}
    100%   {background: #fff;width:80%;}
}
@-webkit-keyframes myfirst 				/* webkit内核的浏览器执行*/
{
    0%   {background: #fff;width:0%;}
    25%   {background: #fff;width:20%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:60%;}
    100%   {background: #fff;width:80%;}
}

看我上面的代码我相信你也发现了，出现的那个线条并不是一个边框，而是li标签里的div，对这个div添加背景颜色以及宽度，在添加的这个过程使用了动画的效果，到了这里，熟悉vue的大佬估计看不下去了，急匆匆写代码去了吧，好吧，为了考虑新手的感受，我还是坚持把它写完。
继续解释
borderTwoClass:spanTwoClass==index什么意思呢？
意思就是想要让borderTwoClass:spanTwoClass生效，spanTwoClass必须等于index
那我们来看看上面的代码

我们是不是已经定义好了呢，但是它等于-1，怎么办？
我们刚刚上面的li标签里不是有个 @mouseover="navShow(index)"方法么，我们把它拿出来用。

 navShow(index){
  this.spanTwoClass = index;
},

这不就实现了吗，你自己测一测呢，实现不了你就得查看你自己的代码了。
接下来鼠标划出去的时候还得有一个消失的效果呀，有些哥们儿说，啊！这不是直接反过来就可以了吗。
对的，没错。。就是酱紫。。我们来看完整代码

 <template>
  <div class="body">
    <div class="oneBody">
        <ul class="Navigation">
          <li 
          v-for="(item,index) in listIndex" 
          :key="index" 
          @mouseover="navShow(index)" 
          @mouseout="dboShow(index)">
            <a class="nav-link" href="#">{{item}}
              <div class="spanClass" 
              :class="{borderTwoClass:spanTwoClass==index,borderThreeClass:spanThreeClass==index}">
              </div>
            </a>
          </li>
        </ul>
    </div>
    <div class="twoDiv">
        sdfsdf
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      spanTwoClass:-1,
      spanThreeClass:-1,
      darkshow:true,
      listIndex:[
        '首页',
        '关于我'
      ]
    }
  },
  methods:{
    navShow(index){
      this.spanTwoClass = index;
    },
    dboShow(index){
      this.spanThreeClass = index;
      this.spanTwoClass = -1;
    }
  },
}
</script>
<style>

</style>
/*划入样式*/
.borderTwoClass{
    background: #fff;
    width: 80%;
    animation:myfirst 0.3s;
    -webkit-animation:myfirst 0.3s;
}
@keyframes myfirst
{
    0%   {background: #fff;width:0%;}
    25%   {background: #fff;width:20%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:60%;}
    100%   {background: #fff;width:80%;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background: #fff;width:0%;}
    25%   {background: #fff;width:20%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:60%;}
    100%   {background: #fff;width:80%;}
}
/*划出样式*/
.borderThreeClass{
    background: #fff;
    width: 0%;
    animation:myfirstwo 0.3s;
    animation-direction:0.3s;
	-webkit-animation:myfirstwo 0.3s;
    -webkit-animation-direction:0.3s;
}
@keyframes myfirstwo
{
    0%   {background: #fff;width:80%;}
    25%   {background: #fff;width:60%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:20%;}
    100%   {background: #fff;width:0%;}
}
@-webkit-keyframes myfirstwo /* Safari and Chrome */
{
    0%   {background: #fff;width:80%;}
    25%   {background: #fff;width:60%;}
    50%   {background: #fff;width:40%;}
    75%   {background: #fff;width:20%;}
    100%   {background: #fff;width:0%;}
}

完整代码仅作为参考，具体页面样式还需你自己去跳转，还有想实现这样的效果其实用字体图标更为方便，我这方法可能麻烦了些，具体字体图标来实现的方式有机会我也会了解，了解后当然也会分享出来。

本篇文章为原创制作，如有抄袭或者使用文字转发的请注明来源，感谢。