原生JS實現(xiàn)移動端模塊的左右滑動動畫效果，基于vue、stylus

大概實現(xiàn)方案：

手指touch屏幕的整個過程，會派發(fā)touchstart、touchmove、touchend三個事件，對這三個事件設(shè)置相應(yīng)函數(shù)，通過移動過程中位置的變化計算出偏移值，進(jìn)行對應(yīng)的設(shè)置。

注：以下講解請忽略數(shù)據(jù)（可用兩個設(shè)置高度寬度的空dom代替），這篇博客只針對切換效果的實現(xiàn)

效果展示

①歌詞未左滑：

②歌詞左滑后：

所需數(shù)據(jù)定義：

解釋：currentShow用于標(biāo)記當(dāng)前顯示的模塊為CD模塊還是歌詞模塊、touchInfo對象用于保存touch事件的相關(guān)屬性

vue dom結(jié)構(gòu)：

stylus：

原生JavaScript：

解釋：三個皆為相應(yīng)dom中touch事件的方法，詳情請注釋即可。

middleTouchStart(e) {// touch開始時,將touchInfo對象設(shè)置為已初始化狀態(tài)this.touchInfo.initiated = true// 用來判斷是否是一次移動this.touchInfo.moved = falseconst touch = e.touches[0]// 記錄touch位置的橫坐標(biāo)與縱坐標(biāo)this.touchInfo.startX = touch.pageXthis.touchInfo.startY = touch.pageY},middleTouchMove(e) {if (!this.touchInfo.initiated) {return}const touch = e.touches[0]// 橫坐標(biāo)與縱坐標(biāo)的偏移const deltaX = touch.pageX - this.touchInfo.startXconst deltaY = touch.pageY - this.touchInfo.startYif (Math.abs(deltaY) > Math.abs(deltaX)) {return}if (!this.touchInfo.moved) {this.touchInfo.moved = true}// 判斷當(dāng)前顯示的是cd還是歌詞,如果是cd,則當(dāng)前左偏移值為0,否則偏移值為-window.innerWidthconst left = this.currentShow === 'cd' ? 0 : -window.innerWidth// 求偏移值const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))// 求偏移值占可視區(qū)域的百分比,用于判斷是否應(yīng)該切換顯示狀態(tài)this.touchInfo.percent = Math.abs(offsetWidth / window.innerWidth)// 移動時歌詞模塊的偏移效果this.$refs.lyricList.$el.style.transform = `translate3d(${offsetWidth}px,0,0)`this.$refs.lyricList.$el.style.transitionDuration = 0// 移動時CD模塊的淡出效果this.$refs.cd.style.opacity = 1 - this.touchInfo.percentthis.$refs.cd.style.transitionDuration = 0},middleTouchEnd() {if (!this.touchInfo.moved) {return}let offsetWidthlet opacityif (this.currentShow === 'cd') {// 移動百分比大于屏幕一半,則切換顯示狀態(tài)if (this.touchInfo.percent > 0.5) {offsetWidth = -window.innerWidthopacity = 0this.currentShow = 'lyric'} else {offsetWidth = 0opacity = 1}} else {if (this.touchInfo.percent < 0.5) {offsetWidth = 0this.currentShow = 'cd'opacity = 1} else {offsetWidth = -window.innerWidthopacity = 0}}// 最終狀態(tài)的設(shè)置// 動畫時間const time = 300// touch完畢后歌詞模塊應(yīng)該放置的位置this.$refs.lyricList.$el.style.transform = `translate3d(${offsetWidth}px,0,0)`this.$refs.lyricList.$el.style.transitionDuration = `${time}ms`// touch完畢后CD模塊的透明度this.$refs.cd.style.opacity = opacitythis.$refs.cd.style.transitionDuration = `${time}ms`// 一次touch完成后,重置touchInfo對象尚未初始化狀態(tài)this.touchInfo.initiated = false}
至此，原生JS實現(xiàn)移動端模塊的左右滑動動畫效果實現(xiàn)完成。

總結(jié)

以上是生活随笔為你收集整理的原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。