前言

之前用餓了么印象最深刻的是聯動菜單和小球飛入購物車動畫，所以想看看別人是怎么實現的，但是看了很多仿餓了么的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的高度為54pxthis.$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

轉載于:https://www.cnblogs.com/wind-lanyan/p/8964545.html

總結

以上是生活随笔為你收集整理的饿了么购物车动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。