最近看了看人氣眼的界面，感覺到學習的地方有很多呀。這里先帶大家看看人氣值跳動的實現。本篇代碼基于Vue2.x.x。

一、概要

??首先看一下效果圖：

??要想實現上面的效果，我們分為這幾個部分：

• 判斷元素是否在可視區域內；
• 函數節流的使用；
• 元素高度過渡動畫；
• 數字跳動動畫；

二、判斷元素是否在可視區域之內

??首先我們要先獲取元素的位置信息，這里我們采用getBoundingClientRect方法，MDN上對于該方法的介紹。然后我們只要與可視區域做個比較，就OK了。

// methodsisElementInViewport (el, offset) {const h = offset || 20,box = el.getBoundingClientRect(),top = (box.top >= 0),left = (box.left >= 0),bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) h),right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) h);return (top && left && bottom && right);}

三、函數節流的使用

??接下來我們需要監聽'scroll'事件，判斷元素是否出現在可視區域內。對于scroll事件的優化之一，我們需要使用函數節流。你可以選擇導入underscore.js的throttle函數，但是這里我嘗試了一下requestAnimationFrame來實現函數節流：

//mounted： document.addEventListener('scroll', this.onScroll , false);// methods：onScroll (e) {if (!this.LOCK) {this.LOCK = true;window.requestAnimationFrame(this.scrollAction);}},scrollAction () {const flag = this.isElementInViewport(this.$refs.zfbitem, 100);if (!flag) {this.LOCK = false;} else {//觸發元素高度過渡動畫this.active = true;//去除掉事件監聽document.removeEventListener('scroll', this.onScroll , false);}}

四、元素的高度過渡動畫

??在CSS當中，實現一種動畫效果，你可以有很多種方式，這里我也就不一一枚舉了，此例子中我采用高度過渡的方式實現效果。有人就會說通過高度過渡沒有任何難度啊？實際上，你需要注意的點還是蠻多的：

• 想讓一個元素的高度為0，并不是簡單的height:0;就能做到的，前提是你不能設置border、垂直方向的padding等；
• 當你的元素設置height為100px時，你再設置max-height為0，它一樣只顯示0的高度；
• 當height的值為auto時，我們是無法過渡的。所以對于auto的情況，我們可以采用max-height來模擬一下，一般情況下，效果還行。

??實現的代碼還是很簡單的，這里就不貼代碼了。

五、數字跳動動畫

??首先我們需要在高度過渡動畫完成后執行數字跳動動畫，這里我們需要監聽'transitionend'事件，對于這個事件需要特別注意的點：

• 每個過渡屬性完成后多會觸發一次transitionend；
• transitionend事件支持冒泡，如果子元素也有過渡效果的話，一定要阻止冒泡。

// watch : active (newValue) {if (newValue) {this.$refs.zfbitem.addEventListener('transitionend', this.transitionAction, false);}}// methods:transitionAction (e) {//不再需要監聽時，一定要移除監聽this.$refs.zfbitem.removeEventListener('transitionend', this.transitionAction, false);this.numberBounce();}

??對于數字跳動的動畫，正好利用了Vue響應式的特性偷懶了一波，感覺實現的還是有些生硬，我主要是從這幾個方面下手的：

• 暫且默認兩位數；
• 個位和十位多需要先跳一輪0~9，然后再跳向最終的數字，這樣避免特殊的情況；
• 個位和十位動畫執行的時長是一樣的，通過時長和各自需要跳動的字數，計算出每一幀需要的時間。

//組件需要傳入的參數props: {rate: Number}//分割個位 和 十位computed: {numberArray () {return (this.rate '').split('');}}numberBounce () {let arr = this.numberArray,totalTime = 200,a = arr[1],aLen = Number.parseInt(a),aTime = Math.floor(totalTime / (aLen 9)),i = 0,b = arr[0],bLen = Number.parseInt(b),bTime = Math.floor(totalTime / (bLen 9)),j = 0;this.bit = 0;this.ten = 0;this.bitTimeId = setInterval(_ => {i ;this.bit = i % 10; // 計數if (i - 10 === aLen) {//千萬不要忘記清除定時器哦clearInterval(this.bitTimeId);this.bitTimeId = null;}}, aTime);this.tenTimeId = setInterval(_ => {j ;this.ten = j % 10;if (j - 10 === bLen) {clearInterval(this.tenTimeId);this.tenTimeId = null;}}, bTime);}

六、總結

??這雖然是一個簡單的效果，但是包含的知識點很多，這里又要強調了：基礎很是重要，千萬不要浮躁。（^_^）

---

??喜歡本文的小伙伴們,歡迎關注我的訂閱號超愛敲代碼,查看更多內容.

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的JS 的平凡之路--学习人气眼中的效果（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

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