apicloud 製作滾動導航選單  下劃線左右平滑移動的動畫

#scoreMenuNav {
            border: 0px solid red;

        }

        #scoreMenuNav ul {
            overflow: hidden;
            overflow-x: auto;
            white-space: nowrap;
            background-color: #ffffff;
            padding-top: 0.1rem;
            position: relative;
        }

        #scoreMenuNav ul::-webkit-scrollbar {
            display: none
        }

        #scoreMenuNav li {
            line-height: 1.8rem;
            text-align: center;
            margin:auto 10px;
            display: inline-block;
            border-bottom: 0px solid #fff;
        }

        #scoreMenuNav li.actives {
            /*border-bottom: 2px solid red;*/
            color: red;
        }

        .active-menu {
            /*border-bottom: 2px solid red !important;*/
            color: red;
        }
        #scoreMenuNav .nav-line{
            height: 0px;
            background-color: 1px solid green;
            border-bottom: 2px solid blue !important;
            position: absolute;
            bottom:0px;
            /*transition:0.3s width ease-out;*/
            -webkit-transition: all .3s;
            transition: all .3s;

            /*-webkit-transform:translate(10px);
            /*animation: moveL 1s;
            /*-moz-animation: moveL 1s;	/* Firefox */
            /*-webkit-animation: moveL 1s;	/* Safari 和 Chrome */
            /*-o-animation: moveL 1s;	 Opera */
            /*animation-fill-mode:forwards;*/

        }
 

上面是css,下面是html

    <nav id="scoreMenuNav">
        <!--div id="MenuNav"-->
        <ul>
          <li tapmode="actives" v-for="(item,index) in memuData" @click="openOneFrame(index)">{{item.snsCatalogName}}</li>
          <div class="nav-line" id="nav-line"></div>
        </ul>

    </nav>
 

moveLine:function(newindex,currentMenu){//選單下劃線與滾動動作
              var _self = this;
              var scoreMenuUl = $api.dom('#scoreMenuNav ul');
              var currentMenuPos = $api.offset(currentMenu);
              console.log(currentMenuPos.l+currentMenu.innerHTML+":"+currentMenu.offsetLeft);
              //下劃線滾動
              var line = $api.dom("#scoreMenuNav .nav-line");
              $api.css(line,"-webkit-transform:translateX("+currentMenu.offsetLeft+"px)");
              line.style.width = currentMenuPos.w+'px';

              //導航選單滾動
              if (_self.OldIndex < newindex) {
                  console.log("左移 左邊的距離:"+currentMenuPos.l+"螢幕寬度："+api.winWidth);
                  currentMenu.offsetLeft + currentMenuPos.w >= api.winWidth ? scoreMenuUl.scrollLeft = scoreMenuUl.scrollLeft + currentMenuPos.w+25 : '';
              }else if (_self.OldIndex > newindex) {
                  currentMenuPos.l < 0 ? scoreMenuUl.scrollLeft = scoreMenuUl.scrollLeft - currentMenuPos.w-25 : '';
                  console.log("右移 左邊的距離:"+currentMenuPos.l+"螢幕寬度："+api.winWidth);
              }

              //_self.OldIndex > newindex ? scoreMenuUl.scrollLeft -= $api.offset(currentMenu).w : scoreMenuUl.scrollLeft += $api.offset(currentMenu).w;


            }