SOURCE

new Vue({
    el:"#app",
    data:{
       top:'-12px',
       curIndex:0,
       menus:[
           {
               text:'首页',
               index:0,
               icon:'icon iconfont iconshouye'
           },
           {
               text:'分类',
               index:1,
               icon:'icon iconfont iconfenlei'
           },
           {
               text:'购物车',
               index:2,
               icon:'icon iconfont icongouwuche'
           },
           {
               text:'订单',
               index:3,
               icon:'icon iconfont iconyly_wodedingdan'
           },
           {
               text:'我的',
               index:4,
               icon:'icon iconfont iconwode'
           }
       ]
    },
    mounted(){
        this.setBgAnimate(0,-15);
        this.setIconAnimate(0,-6,1);
    },
    methods:{
        setBgAnimate:function(index,y){
            anime({
                targets: '.menu-item-bg-'+index,
                translateY:y,
            }); 
        },
        setIconAnimate:function(index,y,scale){
            anime({
                targets: '.menu-item-icon-'+index,
                translateY:y,
                scale:scale
            }); 
        },

        setActive:function(curIndex){
            this.curIndex=curIndex;
            this.$nextTick(()=>{
                var menus=this.menus;
                for(var index=0;index<this.menus.length;index++){
                    var curMenu=menus[index];
                    if(curMenu.index===curIndex){
                        this.setBgAnimate(curMenu.index,-15);
                        this.setIconAnimate(curMenu.index,-6,1);
                    }else{
                        this.setBgAnimate(index,0);
                        this.setIconAnimate(curMenu.index,0,0);
                    }
                }
            })

        },

    }

})

<div id="app">
<div class="menu">
    <div :key="menu" v-for="(menu,index) in menus" @click="setActive(menu.index)"  
    class="menu-item"
    :class="[curIndex===menu.index?'active':'']"
    >
        <div class="menu-item-bg" 
        :class="['menu-item-bg-'+menu.index]">
          <div class="menu-item-left"></div>
          <div class="menu-item-right"></div>
        </div>  
        <div v-show="curIndex===menu.index" key="icon-active"  class="menu-item-icon " 
            :class="[
            'menu-item-icon-'+menu.index,
            curIndex===menu.index?'active':''
            ]">
            <i :class="menu.icon" ></i>
        </div>
        <div v-if="curIndex!==menu.index"  key="icon-default"  class="menu-item-iconDefault">
            <i :class="menu.icon" ></i>
        </div>
        <span 
        class="menu-item-text"
        :class="[curIndex===menu.index?'active':'']"
        >{{menu.text}}</span>
    </div>
</div>
</div>

body,html{
    background-color: #eeeeee;
    margin: 0;
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

.menu{
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: white;
    display: flex;
}
.menu-item{
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    width: 20%;
    height: 100%;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.menu-item-bg{
    position: absolute;
    /*top: 20px;*/
    width: 50px;
    height: 100%;
    border-radius:100%;
    background-color: white;
    z-index: 9;
    
}
.menu-item.active .menu-item-bg{
    box-shadow: 0px -8px 12px -13px black;
}
.menu-item-icon,.menu-item-iconDefault{
    position: relative;
    z-index: 10;
    border-radius:100%;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    transform: scale(0);
}
.menu-item-iconDefault{
    transform: scale(1);
}

.menu-item.active .menu-item-icon{
    color: white;
    background:linear-gradient(138deg,rgba(255,203,0,1) 0%,rgba(255,126,0,1) 100%);
}

.menu-item-bg::before,.menu-item-bg::after{
    display: block;
    content: "";
    position: absolute;
    left: -9px;
    top: 7px;
    width:70px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
   
}
.menu-item-bg::after{
    left: unset;
    right: -9px;
}
.menu-item-text{
    position: relative;
    bottom: 4px;
    z-index: 10;  
    transition: color .2s;
}

.menu-item.active .menu-item-text{
    color: orange;
}