對(duì)于那些不需要路由的內(nèi)部組件，在切換的時(shí)候希望增加一個(gè)輪播過(guò)渡的效果，效果如下：

我們可以引入一個(gè)輪播組件，但是有個(gè)問(wèn)題，通常輪播組件都會(huì)把所有的slide都渲染出來(lái)再進(jìn)行切換，這樣就導(dǎo)致所有的資源都會(huì)觸發(fā)加載，這可能不是我們所期待的，畢竟如果slide比較多的情況需要一次性加載的圖片等資源太多了。所以我們可以手動(dòng)簡(jiǎn)單地寫(xiě)一個(gè)，滿(mǎn)足需求即可。

現(xiàn)在一步步來(lái)實(shí)現(xiàn)這個(gè)功能，先寫(xiě)一個(gè)實(shí)現(xiàn)基本切換的demo.

1. 實(shí)現(xiàn)切換

先用vue-cli搭建一個(gè)工程腳手架，使用以下命令：

npm install -g vue-cli
vue init webpack slide-demo # 運(yùn)行后router等都選擇no

這樣就搭了一個(gè)webpack + vue的工程，進(jìn)入slide-demo目錄，查看src/App.vue，這個(gè)文件是初始化工具提供的，是整個(gè)頁(yè)面的組件。還有一個(gè)src/components目錄，這個(gè)是放子組件的目錄。

在這個(gè)目錄里面新建3個(gè)組件：task-1.vue、task-2.vue、task-3.vue，然后在A(yíng)pp.vue里面import進(jìn)來(lái)，如下App.vue所示：

<script>
// import HelloWorld from './components/HelloWorld'
import Task1 from "./components/task-1";
import Task2 from "./components/task-2";
import Task3 from "./components/task-3";
 
export default {
  name: 'App',
  components: {
    Task1,
    Task2,
    Task3
  }
}
</script>

我們的數(shù)據(jù)格式questions是這樣的：

[{index: 1, type: 1, content: ''}, {index: 2, type: 1, content: ''},
{index: 3, type: 2, content: ''}, {index: 4, type: 3, content: ''}]

它是一個(gè)數(shù)組，數(shù)組里的每個(gè)元素代表每道題，每道題都有一個(gè)類(lèi)型，如選擇題、填空題、判斷題等，分別對(duì)應(yīng)上面的task-1、task-2、task-3，我們用一個(gè)currentIndex變量表示當(dāng)前是在哪道題，初始化為0，如下代碼所示（添加到App.vue里面）：

  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    // 請(qǐng)求question數(shù)據(jù)
    this.questions = [
      {index: 1, type: 1, question: ''}, /*...*/];
  },

通過(guò)改變currentIndex的值，從而切到一下題即下一個(gè)組件，要怎么實(shí)現(xiàn)這個(gè)切換的效果呢？

可以使用Vue自定義的一個(gè)全局組件component，給合它的is屬性，達(dá)到動(dòng)態(tài)改變組件的目的，如下代碼所示：

<template>
<div id="app">
  <div class="task-container">
    <component :is="'task-' + questions[currentIndex].type" 
    </component>
  </div>
</div>
</template>

當(dāng)currentIndex增加時(shí)，就會(huì)改變:is里面的值，依次從task-1變到task-2、task-3等，這樣component就會(huì)換成相應(yīng)的task組件。

接著，再添加一個(gè)切換到下一題的按鈕，在這個(gè)按鈕的響應(yīng)函數(shù)里面改變currentIndex的值。同時(shí)把question的數(shù)據(jù)傳給component：

<template>
<div id="app">
  <div class="task-container">
    <component :is="'task-' + questions[currentIndex].type" 
      :question="questions[currentIndex]"></component>
    <button class="next-question" @click="nextQuestion">下一題</button>
  </div>
</div>
</template>

響應(yīng)函數(shù)nextQuestion實(shí)現(xiàn)如下：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
        % this.questions.length;
  }
},

具體每個(gè)task的實(shí)現(xiàn)參考如task-1.vue示例：

<template>
<section>
  <h2>{{question.index}}. 選擇題</h2>
  <div>{{content}}</div>
</section>
</template>
<script>
export default {
  props: ["question"]
}
</script>

最后的效果如下（加上題目?jī)?nèi)容）：

2. 添加輪播切換效果

輪播切換通常是把所有的slide都拼起來(lái)，拼成一張長(zhǎng)長(zhǎng)的橫圖，然后改變這個(gè)橫圖在顯示容器里面的位置，如老牌jQuery插件flipsnap.js，它是把所有的slide都float: left，形成一張長(zhǎng)圖，然后 改變這張長(zhǎng)圖的translate值 ，達(dá)到切換的目的。這個(gè)插件的缺點(diǎn)是沒(méi)有辦法從最后一張切回第一張，解決這個(gè)問(wèn)題的方法之一是不斷地移動(dòng)DOM：每次切的時(shí)候都把第一張移到最后一張的后面，這樣就實(shí)現(xiàn)了最后一張點(diǎn)下一張的時(shí)候回到第一張的目的，但是這樣移來(lái)移去地對(duì)性能消耗比較大，不是很優(yōu)雅。另外一個(gè)輪播插件jssor slider，它也是把所有的slide都渲染出來(lái)，然后每次切換的時(shí)候都 動(dòng)態(tài)地計(jì)算每張slide的translate的值 ，而不是整體長(zhǎng)圖的位置，這樣就不用移動(dòng)DOM節(jié)點(diǎn)，相對(duì)較為優(yōu)雅。還有很多Vue的輪播插件的實(shí)現(xiàn)也是類(lèi)似上面提到的方式。

不管怎么樣，上面的輪播模式都不太適用于我們的場(chǎng)景，其中一個(gè)是這種答題的場(chǎng)景不需要切回上一題，每道題做完就不能回去了，更重要的一個(gè)是我們 不希望一次性把所有的slide都渲染出來(lái) ，這樣會(huì)導(dǎo)致每張幻燈片里的資源都觸發(fā)加載，就比如img標(biāo)簽雖然你把它display: none了，但是只要它的src是一個(gè)正常的url，它就會(huì)請(qǐng)求加載。 由于slide往往會(huì)比較多，就不使用這種輪播插件了。

還可以使用Vue自帶的transition，但是transition的問(wèn)題是，切下一個(gè)的時(shí)候，上一個(gè)不見(jiàn)了，因?yàn)楸讳N(xiāo)毀了，只有下一個(gè)的動(dòng)畫(huà)，并且不能預(yù)加載下一個(gè)slide的資源。

所以我們手動(dòng)實(shí)現(xiàn)一個(gè)。

我的想法是每次都準(zhǔn)備兩個(gè)slide，第1個(gè)slide是當(dāng)前展示用的，第2個(gè)slide拼在它的后面，準(zhǔn)備切過(guò)來(lái)，當(dāng)?shù)?個(gè)slide切過(guò)來(lái)之后，刪掉第1個(gè)slide，然后在第2個(gè)的后面再接第3個(gè)slide，不斷地重復(fù)這個(gè)過(guò)程。如果我們沒(méi)有使用Vue，而是自己增刪DOM，那么沒(méi)什么問(wèn)題，可以很任性地自己發(fā)揮。 使用Vue可以怎么優(yōu)雅地實(shí)現(xiàn)這個(gè)功能呢 ？

在上面一個(gè)component的基礎(chǔ)上，再添加一個(gè)component，剛開(kāi)始第1個(gè)component是當(dāng)前展示的，而第2個(gè)component是拼在它右邊的，當(dāng)?shù)?個(gè)切過(guò)去之后，就把第1個(gè)移到第2的后面，同時(shí)把內(nèi)容改成第3個(gè)slide的內(nèi)容，依此類(lèi)推。使用Vue不太好動(dòng)態(tài)地改DOM，但是可以 借助jssor slider的思想 ，不移動(dòng)DOM，只是改變component的translate的值。

給其中一個(gè)component套一個(gè)next-task的類(lèi)，具有這個(gè)類(lèi)的組件就表示它是下一張要出現(xiàn)的，它需要translateX(100%)，如下代碼所示：

<template>
<div id="app">
  <div class="task-container">
    <component :is="'task-' + questions[currentIndex].type" 
      ></component>
    <component :is="'task-' + questions[currentIndex + 1].type" 
      class="next-task"></component>
  </div>
</div>
</template>
 
<style>
.next-task {
  display: none;
  transform: translateX(100%);
  /* 添加一個(gè)動(dòng)畫(huà)，當(dāng)改變transform的值時(shí)就會(huì)觸發(fā)這個(gè)動(dòng)畫(huà) */
  transition: transform 0.5s ease;
}
</style>

上面代碼把具有.next-task類(lèi)的component隱藏了，這樣是做個(gè)優(yōu)化，因?yàn)閐isplay: none的元素只會(huì)構(gòu)建DOM，不會(huì)進(jìn)行l(wèi)ayout和render渲染。

所以就把問(wèn)題轉(zhuǎn)換成怎么在這兩個(gè)component之間，切換next-task的類(lèi)。一開(kāi)始next-task是在第2個(gè)，當(dāng)?shù)?個(gè)切過(guò)來(lái)之后，next-task變成加在第1個(gè)上面，這樣輪流交替。

進(jìn)而，發(fā)現(xiàn)一個(gè)規(guī)律，如果currentIndex是偶數(shù)話(huà)，如o、2、4…，那么next-task是加在第2個(gè)component的，而如果currentIndex是奇數(shù)，則next-task是加在第1個(gè)component的。所以可以根據(jù)currentIndex的奇偶性切換。

如下代碼所示：

<template>
<div id="app">
  <div class="task-container">
    <component :is="'task-' + questions[evenIndex].type" 
      :class="{'next-task': nextIndex === evenIndex}"
      ref="evenTask"></component>
    <component :is="'task-' + questions[oddIndex].type" 
      :class="{'next-task': nextIndex === oddIndex}
      ref="oddTask"></component>
  </div>
</div>
</template>
 
<script>
 
export default {
  name: 'App',
  data() {
    return {
      currentIndex: 0, // 當(dāng)前顯示的index
      nextIndex: 1,  // 表示下一張index，值為currentIndex + 1
      evenIndex: 0,  // 偶數(shù)的index，值為currentIndex或者是currentIndex + 1
      oddIndex: 1   // 奇數(shù)的index，值同上
    };
  },
}

第1個(gè)component用來(lái)顯示偶數(shù)的slide，第2個(gè)是用來(lái)顯示奇數(shù)的slide（分別用一個(gè)evenIndex和oddIndex代表），如果nextIndex是偶數(shù)的，那么偶數(shù)的component就會(huì)有一個(gè)next-task的類(lèi)，反之則亦然。然后在下一題按鈕的響應(yīng)函數(shù)里面改變這幾個(gè)index的值：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    this._slideToNext();
  },
  // 切到下一步的動(dòng)畫(huà)效果
  _slideToNext() {
 
  }
}

nextQuestion函數(shù)可能還有其它一些處理，在它里面調(diào)一下_slideToNext函數(shù)，這個(gè)函數(shù)的實(shí)現(xiàn)如下：

_slideToNext() {
  // 當(dāng)前slide的類(lèi)型（currentIndex已經(jīng)加1了，這里要反一下）
  let currentType = this.currentIndex % 2 ? "even" : "odd",
    // 下一個(gè)slide的類(lèi)型
    nextType = this.currentIndex % 2 ? "odd": "even";
  // 獲取下一個(gè)slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  // 把下一個(gè)slide的translate值置為0，原本是translateX(100%)
  $nextSlide.style.transform = "translateX(0)";
  // 等動(dòng)畫(huà)結(jié)束后更新數(shù)據(jù)
  setTimeout(() => {
    this.nextIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 原本的next是當(dāng)前顯示的slide
    this[`${nextType}Index`] = this.currentIndex;
    // 而原本的current slide要顯示下下張的內(nèi)容了
    this[`${currentType}Index`] = this.nextIndex;
  }, 500);
}

代碼把下一個(gè)slide的display改成block，并把它的translateX的值置為0，這個(gè)時(shí)候不能馬上更新數(shù)據(jù)觸發(fā)DOM更新，要等到下一個(gè)slide移過(guò)去的動(dòng)畫(huà)結(jié)束之后再開(kāi)始操作，所以加了一個(gè)setTimeout，在回調(diào)里面調(diào)換nextTask的類(lèi)，加到原本的current slide，并把它的內(nèi)容置成下下張的內(nèi)容。這些都是通過(guò)改變相應(yīng)的index完成的。

這樣基本上就完成了，但是我們發(fā)現(xiàn)一個(gè)問(wèn)題，切是切過(guò)去了，就是沒(méi)有動(dòng)畫(huà)效果。這個(gè)是因?yàn)閺膁isplay: none變到display: block是沒(méi)有動(dòng)畫(huà)的，要么改成visibility: hidden到visible，要么觸發(fā)動(dòng)畫(huà)的操作加到$nextTick或者setTimeout 0里面，考慮到性能問(wèn)題，這里使用第二種方案：

$nextSlide.style.display = "block";
// 這里使用setimeout，因?yàn)?nextTick有時(shí)候沒(méi)有動(dòng)畫(huà)，非必現(xiàn)
setTimeout(() => {
  $nextSlide.style.transform = "translateX(0)";
  // ...
}, 0);

經(jīng)過(guò)這樣的處理之后，點(diǎn)下一題就有動(dòng)畫(huà)了，但是又發(fā)現(xiàn)一個(gè)問(wèn)題，就是偶數(shù)的next-task會(huì)被蓋住，因?yàn)榕紨?shù)的是使用第一個(gè)component，它是會(huì)被第二個(gè)compoent蓋住的，所以需要給它加一個(gè)z-index：

.next-task { 
  display: none;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 2;
}

這個(gè)問(wèn)題還比較好處理，另外一個(gè)不太好處理的問(wèn)題是：動(dòng)畫(huà)的時(shí)間是0.5s，如果用戶(hù)點(diǎn)下一題的速度很快在0.5s之內(nèi)，上面的代碼執(zhí)行就會(huì)有問(wèn)題，會(huì)導(dǎo)致數(shù)據(jù)錯(cuò)亂。如果每次切到下一題之后按鈕初始化都是disabled，因?yàn)楫?dāng)前題還沒(méi)答，只有答了才能變成可點(diǎn)狀態(tài)，可以保證0.5s的時(shí)間是夠的，那么就可以不用考慮這種情況。但是如果需要處理這種情況呢？

3. 解決點(diǎn)擊過(guò)快的問(wèn)題

我想到兩個(gè)方法，第一個(gè)方法是用一個(gè)sliding的變量標(biāo)志當(dāng)前是否是在進(jìn)行切換的動(dòng)畫(huà)，如果是的話(huà)，點(diǎn)擊按鈕的時(shí)候就直接更新數(shù)據(jù)，同時(shí)把setTimeout 0.5s的計(jì)時(shí)器清掉。這個(gè)方法可以解決數(shù)據(jù)錯(cuò)亂的問(wèn)題，但是切換的效果沒(méi)有了，或者是切換到一半的時(shí)候突然就沒(méi)了，這樣體驗(yàn)不是很好。

第二個(gè)方法是延后切換，即如果用戶(hù)點(diǎn)擊過(guò)快的時(shí)候，把這些操作排隊(duì)，等著一個(gè)個(gè)做切換的動(dòng)畫(huà)。

我們用一個(gè)數(shù)組表示隊(duì)列，如果當(dāng)前已經(jīng)在做滑動(dòng)的動(dòng)畫(huà)，則入隊(duì)暫不執(zhí)行動(dòng)畫(huà)，如下代碼所示：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 把currentIndex插到隊(duì)首
    this.slideQueue.unshift(this.currentIndex);
    // 如果當(dāng)前沒(méi)有滑動(dòng)，則執(zhí)行滑動(dòng)
    !this.sliding && this._slideToNext();
  },
}

每次點(diǎn)擊按鈕都把待處理的currentIndex插到隊(duì)列里面，如果當(dāng)前已經(jīng)在滑動(dòng)了，則不立刻執(zhí)行，否則執(zhí)行滑動(dòng)_slideToNext函數(shù)：

_slideToNext() {
  // 取出下一個(gè)要處理的元素
  let currentIndex = this.slideQueue.pop();
  // 下一個(gè)slide的類(lèi)型
  let nextType = currentIndex % 2 ? "odd" : "even";
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  setTimeout(() => {
    $nextSlide.style.transform = "translateX(0)";
    this.sliding = true;
    setTimeout(() => {
      this._updateData(currentIndex);
      // 如果當(dāng)前還有未處理的元素，
      // 則繼續(xù)處理即繼續(xù)滑動(dòng)
      if (this.slideQueue.length) {
        // 要等到兩個(gè)component的DOM更新了
        this.$nextTick(this._slideToNext);
      } else {
        this.sliding = false;
      }
    }, 500);
  }, 0);
},

這個(gè)函數(shù)每次都先取出當(dāng)前要處理的currentIndex，然后接下來(lái)的操作和第2點(diǎn)提到的一樣，只是在0.5s動(dòng)畫(huà)結(jié)束后的異步回調(diào)里面需要判斷一下，當(dāng)前隊(duì)列是否還有未處理的元素，如果有的話(huà)，需要繼續(xù)執(zhí)行_slideToNext，直到隊(duì)列空了。這個(gè)執(zhí)行需要掛在nextTick里面，因?yàn)樾枰鹊絻蓚€(gè)component的DOM更新了才能操作。

這樣理論上就沒(méi)問(wèn)題了，但實(shí)際上還是有問(wèn)題，感受如下：

我們發(fā)現(xiàn)有些slide沒(méi)有過(guò)渡效果，而且不是非必現(xiàn)的，沒(méi)有規(guī)律。經(jīng)過(guò)一番排查，發(fā)現(xiàn)如果把上面的nextTick改成setTimeout情況就會(huì)好一些，并且setTimeout的時(shí)間越長(zhǎng)，就越不會(huì)出現(xiàn)失去過(guò)渡效果的情況。但是這個(gè)不能從根本上解決問(wèn)題，這里的原因應(yīng)該是Vue的自動(dòng)更新DOM和transition動(dòng)畫(huà)不是很兼容，有可能是Vue的異步機(jī)制問(wèn)題，也有可能是JS結(jié)合transition本身就有問(wèn)題，但以前沒(méi)有遇到過(guò)，具體沒(méi)有深入排查。不管怎么樣，只能放棄使用CSS的transition做動(dòng)畫(huà)。

如果有使用jQuery的話(huà)，可以使用jQuery的animation，如果沒(méi)有的話(huà)，那么可以使用原生dom的animate函數(shù)，如下代碼所示：

_slideToNext(fast = false) {
  let currentIndex = this.slideQueue.pop();
  // 下一個(gè)slide的類(lèi)型
  let nextType = currentIndex % 2 ? "odd" : "even";
  // 獲取下一個(gè)slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  this.sliding = true;
  // 使用原生animate函數(shù)
  $nextSlide.animate([
    // 關(guān)鍵幀
    {transform: "translateX(100%)"},
    {transform: "translateX(0)"}
  ], {
    duration: fast ? 200 : 500,
    iteration: 1,
    easing: "ease"
  // 返回一個(gè)Animate對(duì)象，它有一個(gè)onfinish的回調(diào)
  }).onfinish = () => {
    // 等動(dòng)畫(huà)結(jié)束后更新數(shù)據(jù)
    this._updateData(currentIndex);
    if (this.slideQueue.length) {
      this.$nextTick(() => {
        this._slideToNext(true);
      });
    } else {
      this.sliding = false;
    }
  };
},

使用animate函數(shù)達(dá)到了和transition同樣的效果，并且還有一個(gè)onfinish的動(dòng)畫(huà)結(jié)束回調(diào)函數(shù)。上面代碼還做了一個(gè)優(yōu)化，如果用戶(hù)點(diǎn)得很快的時(shí)候，縮短過(guò)渡動(dòng)畫(huà)的時(shí)間，讓它切得更快一點(diǎn)，這樣看起來(lái)更自然一點(diǎn)。使用這樣的方式，就不會(huì)出現(xiàn)transition的問(wèn)題了。最后的效果如下：

這個(gè)體驗(yàn)感覺(jué)已經(jīng)比較流暢了。

原生animate不兼容IE/Edge/Safari，可以裝一個(gè)polyfill的庫(kù)，如這個(gè) web-animation ，或者使用其它一些第三方的動(dòng)畫(huà)庫(kù)，或自己用setInterval寫(xiě)一個(gè)。

如果你要加上一題的按鈕，支持返回上一題，那么可能需要準(zhǔn)備3個(gè)component，中間那個(gè)用于顯示，左右兩邊各跟著一個(gè)，準(zhǔn)備隨時(shí)切過(guò)來(lái)。具體讀者可以自行嘗試。

這種模式除了答題的場(chǎng)景，還有多封郵件預(yù)覽、PPT展示等都可以用到，它除了有一個(gè)過(guò)渡的效果外，還能提前預(yù)加載下一個(gè)slide需要的圖片、音頻、視頻等資源，并且不會(huì)像傳統(tǒng)的輪播插件那樣一下子把所有的slide都渲染了。適用于slide比較多的情況，不需要太復(fù)雜的切換動(dòng)畫(huà)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論