餓了麼購物車動畫

前言

以前用餓了麼印象最深入的是聯動菜單和小球飛入購物車動畫，因此想看看別人是怎麼實現的，可是看了不少仿餓了麼的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