我正在参加码上掘金体验活动，详情：show出你的创意代码块”

前言

用jQ写了个Tabbar的动画，只为参加码上掘金活动拿个奖品，现在用我粗糙的文笔来描述一下我拙劣的技术。这里用jq的原因是，本来也没想好用啥，原生js也忘的差不多，jq还好能用上参加活动，样式也是用less凑合。

整体思路

总的来说，代码布局上给他分了3个部分，一部分作为展示的主体，也就是tabbar，另外两部分是用来做动画的。主体部分就不多说，展示选中的这块是动画的主体，需要画个内凹的半圆，还有一个凸出的圆，其次就是这块的背景是透明的，所以最后这部分就是处理这个透明用的。

选中动画需要3个块的配合，class='active' 这块是绝对布局，只需要改变left的位置即可，然后动画用 transition: all 0.3s ease-in-out; 就能实现。

class="tab-list" 这块是最简单的，选中的时候，需要给选中的块加上tab-active的样式，离开的那个就加上出现的动画icon-appear，这样就有消失和出现的动画。

透明背景 class="bg-color" 这块是用3个块结合形成的，用的布局是display:flex；中间是固定的宽度，右边是自适应宽度flex:1；

选中的时候就改变左边块的宽度，动画用的是 transition: all 0.3s ease-in-out;。