国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 的 transition & 實現路由類 Tab 左右滑動切換的效果

happyfish / 3820人閱讀

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

Vue 的 transition & 實現路由類 Tab 左右滑動切換的效果

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

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

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

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

對于2的解釋:

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

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

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

復盤一下過程:
剛開始的時候, 元素有自己的樣式, 有 v-enter, v-enter-active 中定義的樣式.
在一段時間間隔, 比如說 100ms 之后, 刪掉了 v-enter, 意味著元素的樣式變化。
變化, 然后發(fā)現存在 transition的定義, 就應用 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);

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

但是元素離開和元素進入還有點不一樣:

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

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

transition 過渡效果的樣式實際上是有通用規(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;
}
關于 transition 的一個應用: 實現路由 類 Tab 左右滑動切換的效果.

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

      [viewport]
      [router1]   [router2]

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

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

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

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

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

這就是時機.
先說下我們的 DOM 結構

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

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

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

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

先說向前進:
假設 transition 的 name = "slide-forward"

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

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

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

再說后退, 設 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;
}

現在再討論一下: 我們該如何判斷當前是前進還是后退呢?
下面這樣:

  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"
      } 
    }  
  }

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83991.html

相關文章

  • vue 模仿今日頭條demo

    vue 頭條 demo 寫在前面 總結一下寫 demo 過程中 遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！ 一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網 黃軼 老師 敲了一下 餓了么商品購買頁的demoele效果預覽 該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流 數據接口 直接打開 今日...

    simpleapples 評論0 收藏0

  • 簡易實踐的vue自定義tab入門

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進入過渡生效時的狀態(tài)。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。我們用特性來擴展，從而達到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進入/離開 & 列表過渡 章節(jié)鏈接描述 要想實現tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現動畫效果 條件渲...

    Benedict Evans 評論0 收藏0

  • 簡易實踐的vue自定義tab入門

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進入過渡生效時的狀態(tài)。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。我們用特性來擴展，從而達到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進入/離開 & 列表過渡 章節(jié)鏈接描述 要想實現tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現動畫效果 條件渲...

    Cc_2011 評論0 收藏0

  • 簡易實踐的vue自定義tab入門

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進入過渡生效時的狀態(tài)。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。我們用特性來擴展，從而達到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進入/離開 & 列表過渡 章節(jié)鏈接描述 要想實現tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實現動畫效果 條件渲...

    JackJiang 評論0 收藏0

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

    摘要：免費升級到升級到后，服務器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進行離線緩存，更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...

    zengdongbao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<