Vue 的 transition & 實(shí)現(xiàn)路由類 Tab 左右滑動切換的效果

happyfish 發(fā)布于2019-08-20 18:00 / 3818人閱讀

摘要：的實(shí)現(xiàn)路由類左右滑動切換的效果先說下為什么可以讓你定義了之后就可以觸發(fā)實(shí)際過程按我的理解應(yīng)該是這樣最開始的時候先給元素加上了兩個在下一幀的時候刪掉這個在過渡結(jié)束之后再刪掉對于的解釋這個幀的概念我剛開始沒理解但是實(shí)際上可以理

Vue 的 transition & 實(shí)現(xiàn)路由類 Tab 左右滑動切換的效果

先說下 transition 為什么可以讓你定義了 v-enter, v-enter-active 之后就可以觸發(fā)transition.
實(shí)際過程按我的理解應(yīng)該是這樣:

最開始的時候, 先給元素加上了 v-enter, v-enter-active 兩個class

在下一幀的時候, 刪掉 v-enter 這個class.

在過渡結(jié)束之后, 再刪掉 v-enter-active.

對于2的解釋:

這個幀的概念我剛開始沒理解, 但是實(shí)際上可以理解成 "一段時間之后";

你刪掉 v-enter 會導(dǎo)致什么情況?
元素的樣式會變化

那么元素現(xiàn)在只有定義在自己身上的樣式了
所以要變回去
然后發(fā)現(xiàn)有定義在 v-enter-active 上面的過渡效果
就會應(yīng)用過渡效果

復(fù)盤一下過程:
剛開始的時候, 元素有自己的樣式, 有 v-enter, v-enter-active 中定義的樣式.
在一段時間間隔, 比如說 100ms 之后, 刪掉了 v-enter, 意味著元素的樣式變化。
變化, 然后發(fā)現(xiàn)存在 transition的定義, 就應(yīng)用 transition,
這就形成了我們最終看見的 transition效果.

給個demo:

.box {
  height: 100px;
  width: 100px;
  background: red;
}
.v-enter {
  height: 200px;
  width: 200px;
}
.v-enter-active {
  transition: all 2s;
}

    var box = document.querySelector(".box");

    box.classList.add("v-enter");
    box.classList.add("v-enter-active");

    setTimeout(function(){
      box.classList.remove("v-enter");
    }, 100);

再說下元素從顯示到消失的時候
我們知道, 如果過渡效果的終點(diǎn)是 display:none, 那么過渡效果是不會生效的, 所以我覺得
v-if, v-show 對過渡效果都是有所控制的, 它們應(yīng)該是在 transitionEnd 的時候才去應(yīng)用
display:none; 或者移除元素.

但是元素離開和元素進(jìn)入還有點(diǎn)不一樣:

你的元素在離開的時候, 元素是已經(jīng)存在于頁面上, 是你已經(jīng)能看見的
然后你給它加上 v-leave, v-leave-active
按照之前的邏輯, v-leave 有樣式, v-leave-active 里面有 transition
元素的樣式變更-> 觸發(fā) transition, 所以加上就直接觸發(fā) transition, 還等個什么下一幀。
既然加上就觸發(fā) transition, 那你要 v-leave 干嘛, 為什么不直接把
樣式和 transition 都加在 v-leave-active 上面呢。

暫時沒有發(fā)現(xiàn) v-leave 的作用, 感覺不是必須的, 就是對稱一樣. 或者為了樣式分離.

transition 過渡效果的樣式實(shí)際上是有通用規(guī)律的:

.v-enter {
  opacity:0;
}
.v-enter-active {
  transition: all 1s;
}
.v-leave-active {
  opacity: 0;
  transition: all 1s;
}

更常見的寫法是這樣:

.v-enter {
  opacity:0;
}
.v-enter-active, .v-leave-active {
  transition: all 1s;
}
.v-leave-active {
  opacity: 0;
}

關(guān)于 transition 的一個應(yīng)用: 實(shí)現(xiàn)路由類 Tab 左右滑動切換的效果.

類 Tab 左右滑動切換的效果,就是這樣:

      [viewport]
      [router1]   [router2]

router1,2 左右拉來拉去, 就是左右滑動切換的效果.

那我們的問題就可以變成:
把當(dāng)前的路由 router1, 和下一個路由 router2, 并列放到一行,
用戶點(diǎn)擊跳轉(zhuǎn)的的時候, 同時滑動 router1,router2

但是直覺都告訴我們, 路由壓根就不是這么排列的, 當(dāng)你在 router1 的時候, router2 根本就不存在啊.
不存在何來并排.

但是想想我們之前說的, 加上 transition 之后, 元素消失會怎么辦?
元素先應(yīng)用 transition, transitionEnd 的時候, 元素才會消失.

這個的意思就是說:
跳轉(zhuǎn)的一瞬間, 當(dāng)前的 route1 會開始應(yīng)用 transition, 還沒有消失于頁面之上.
然后下一個 router2 已經(jīng)創(chuàng)建, 已經(jīng)存在于頁面之上.
此時, 兩個 router 都是存在的.

這就是時機(jī).
先說下我們的 DOM 結(jié)構(gòu)

我們要先讓兩個 router 并排, how ?
定位啊:

.router-view {
  position: absolute;
  top: 0;
  left: 0;
}

按理說兩個 router 都是 left:0, top:0, 應(yīng)該是重疊的是不是?
對.
所以我們對要進(jìn)入的那個 router 做下 translate
比如當(dāng)前的是 router1, 點(diǎn)擊要向前跳轉(zhuǎn)到 router2, 那么對 router2 translateX(100%);
這樣兩個 router 是不是就并排了.

并排之后就是動起來, 也就是應(yīng)用滑動效果.
兩個組件都是被 transition 包裹起來所以只要定義相應(yīng)的class就可以了.

先說向前進(jìn):
假設(shè) transition 的 name = "slide-forward"

對于 router1:
start: 是當(dāng)前的位置
end: 是當(dāng)前位置的 translateX(-100%), 也就是當(dāng)前位置的左邊.

對于 router2:
start: 是相對于當(dāng)前位置的 translateX(100%);
end: 是當(dāng)前位置.

// router1
.slide-forward-leave-active {
  transition: all 1s;
  transform: translate(-100%);
}
// router2
.v-enter {
  transform: translateX(100%);
}
.v-enter-active {
  transition: all 1s;
}

再說后退, 設(shè) transition 的 name = "slide-back";
class就是:

// router1
.v-enter {
  transfrom: translateX(-100%);
}
// router2
.v-enter-active {
  transition: all 1s;
}
.v-leave-active {
  transfrom: translateX(100%);
  transition: all 1s;
}

整理一下, 得到的兩個 transition,

.slide-forward-enter {
  transform: translate(100%);
}
.slide-forward-enter-active {
  transition: all 1s ease-in-out;
}
.slide-forward-leave-active {
  transform: translate(-100%);
  transition: all  1s ease-in-out;
}


.slide-back-enter {
  transform: translate(-100%);
}
.slide-back-enter-active {
  transition: all 1s ease-in-out;
}
.slide-back-leave-active {
  transform: translate(100%);
  transition: all  1s ease-in-out;
}

現(xiàn)在再討論一下: 我們該如何判斷當(dāng)前是前進(jìn)還是后退呢?
下面這樣:

  watch: {  
    "$route" (to, from) {  
      if (!this.map[to.path]) {
        this.map[to.path] = +new Date() + 1;
      }
      if (!this.map[from.path]) {
        this.map[from.path] = +new Date();
      }

      if (this.map[to.path] > this.map[from.path]) {
        this.transitionName = "slide-forward";
      } else {
        this.transitionName = "slide-back"
      } 
    }  
  }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83991.html

發(fā)表評論

登陸后可評論

0條評論

happyfish

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow降低版本

閱讀 3822·2023-04-25 19:07
JS中bind、call和apply的作用以及在TS裝飾器中的用法

閱讀 3571·2021-11-22 12:02
誰說“程序員離開電腦就是廢物？我身邊這位大兄弟表示不服！真事

閱讀 3146·2021-10-12 10:11
速云：香港HGC/香港HKT VPS;4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbp

閱讀 3934·2021-09-03 10:49
關(guān)于Web移動端rem單位的那些坑

閱讀 2899·2019-08-30 13:21
H5移動端適配IphoneX等機(jī)型

閱讀 3011·2019-08-30 11:14
前端每日實(shí)戰(zhàn)：49# 視頻演示如何用純 CSS 創(chuàng)作一支誘人的冰棍

閱讀 2095·2019-08-29 15:40
CSS之各種居中

閱讀 2881·2019-08-28 18:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue 的 transition & 實(shí)現(xiàn)路由類 Tab 左右滑動切換的效果

相關(guān)文章

vue 模仿今日頭條demo

**簡易實(shí)踐的vue自定義tab入門**

**簡易實(shí)踐的vue自定義tab入門**

**簡易實(shí)踐的vue自定義tab入門**

Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監(jiān)控,持續(xù)構(gòu)建。

發(fā)表評論

0條評論

happyfish

男|高級講師

TA的文章

tensorflow降低版本

JS中bind、call和apply的作用以及在TS裝飾器中的用法

誰說“程序員離開電腦就是廢物？我身邊這位大兄弟表示不服！真事

速云：香港HGC/香港HKT VPS;4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbp

關(guān)于Web移動端rem單位的那些坑

H5移動端適配IphoneX等機(jī)型

前端每日實(shí)戰(zhàn)：49# 視頻演示如何用純 CSS 創(chuàng)作一支誘人的冰棍

CSS之各種居中

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue 的 transition & 實(shí)現(xiàn)路由類 Tab 左右滑動切換的效果

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！