前言

之前用餓了麽印象最深刻的是聯動菜單和小球飛入購物車動畫，所以想看看別人是怎麽實現的，但是看了很多仿餓了麽的demo都是實現了一個完整的大的項目，要找到那個小模塊很麻煩，所以自己將聯動菜單和動畫提取出來寫了一個demo，方便學習。

目的只是想突出功能所以界面細節很relax，大家也relax的看看吧~

效果圖

實現功能

1. 聯動菜單

1.1 用戶點擊左側導航欄會跳轉到相應的內容

這個很簡單，給導航欄的每一個元素加一個點擊事件，其實也可以通過a標簽的錨點來實現

<li v-for="(item, index) in navs" 
    :key="index" 
    :class
 
="{click: selector==index}"
    @click="toHash(item, index)">
    {{item}}
</li>

// 點擊右側導航欄
toHash(item, index) {
    this.selector = index;
    window.location.hash = item; 
    
    // 導航欄向上滾動相應距離，一個li的高度為54px
    this.$refs.left.scrollTop = (index > 7 ? index-7 : 0)*54;
}

1.2 用戶滑動右側的內容左側的導航欄會響應式改變

右側內容監聽一個scroll事件，當觸發滑動事件的時候獲取粘性定位在頂部的標題，根據標題使導航欄定位到相應的li

var obj = element.getBoundingClientRect();

上述api返回一個對象obj，該對象有left、top等屬性，可以根據該屬性獲得element元素在頁面的位置

listScroll() {
    // 為了達到聯動效果，右側滑動則改變左側導航欄樣式
    var titles = document.getElementsByClassName(‘goodTitle‘);
    for(var i = 0; i < titles.length; i++) {
        
 
var style = titles[i].getBoundingClientRect();
        if(style.top == 107) {
            this.toHash(titles[i].innerHTML, i);
        }
    }
}

1.3 標題欄粘性定位

#el {
    position: sticky;
    top: 0;
}

該元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。這也實現了內容區標題欄始終在頂部的效果。關於粘性定位更多的可以看這裏

2. 按鈕緩慢彈出

當我們點擊添加按鈕的時候其他的內容會緩慢彈出，這個是靠css的動畫實現的。

我們先將個數減少按鈕和被選中物品個數num的left設為48px，使其被隱藏。點擊添加按鈕時選擇物品個數大於0則讓left變為0達到一個緩慢彈出的動畫效果。

 <div :class="{pop: true, mov: item.num>0}">
    <!---->
 </div>

.pop {
    display: inline-block;
    position: relative;
    left: 48px;
    opacity: 0;
    transition: all ease .5s;
}
.mov {
    left: 0;
    opacity: 1;
}

3.小球飛入購物車動畫

先準備n個小球，為什麽不是一個呢？因為如果用戶連續點擊添加可能會出現小球不夠的情況，所以需要多個小球。

<!-- 運動的小球 -->
<div id="points">
    <div class="pointOuter pointPre">
        <div class="point-inner"></div>
    </div>  
    <!--其他n個小球-->
</div>

令小球為絕對定位這樣可以改變它的left和top。

動畫實現思路：用戶點擊添加時將一個小球的位置設置為被點擊元素的位置，且獲取目的地位置（購物車位置），當小球拋出時使其運動方式按照貝塞爾曲線過渡。

increase(index1, index2, event) { 
    
    // some code...
    
    // 小球動畫 
    var top = event.clientY, // 小球降落起點
        left = event.clientX,
        endTop = window.innerHeight - 30,  // 小球降落終點
        endLeft = 20; 

    // // 小球到達起點並去掉小球的display: none;
    var outer = $(‘#points .pointPre‘).first().removeClass("pointPre").css({
        left: left + ‘px‘,
        top: top + ‘px‘
    });
    var inner = outer.find(".point-inner"); 

    setTimeout(function() { 
        // 將jquery對象轉換為DOM對象
        outer[0].style.webkitTransform = ‘translate3d(0,‘ + (endTop - top) + ‘px,0)‘;
        inner[0].style.webkitTransform = ‘translate3d(‘ + (endLeft - left) + ‘px,0,0)‘;
        
        // 小球運動完畢恢復到原點
        setTimeout(function() {
            outer.removeAttr("style").addClass("pointPre");
            inner.removeAttr("style");
        }, 1000);  //這裏的延遲值和小球的運動時間相關
    }, 1); 
}

註意點：

• 嵌套的setTimeout中的時間之所以設置為1s，是因為css中規定的小球運動時間為1s，所以在小球1s運動完以後會令它恢復到原來的位置，你想想，小球一共就只有那麽幾個，如果不恢復的話下次用戶點擊了小球就不夠啊...

總結

以上是餓了麽購物車模塊主頁面的幾個主要技術點，這個demo註重功能所以UI什麽的沒有完全copy餓了麽，大家也可以把項目fork下來自己添加組件來擴充成一個高仿的餓了麽購物車模塊。

源碼地址：vue-eleme-shoppingCart

餓了麽購物車動畫