Vue 過(guò)渡

Vue 的過(guò)渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過(guò)渡效果。

過(guò)渡的實(shí)現(xiàn)要在目標(biāo)元素上使用 transition 屬性，具體實(shí)現(xiàn)參考Vue2 過(guò)渡

下面例子中我們用到列表過(guò)渡，可以先學(xué)習(xí)一下官方的例子

要同時(shí)渲染整個(gè)列表，比如使用 v-for，我們需要用到 <transition-group> 組件

Vue 輪播圖

我們先看這樣一個(gè)列表

<ul> <li v-for="list in slideList">  <img :src="list.image" :alt="list.desc"> </li></ul>

這個(gè)列表要從實(shí)例(見文章末尾)中獲取了三張圖片，要使其中的圖片產(chǎn)生輪播，我們需要用 <transition-group> 組件替換其中的 ul 標(biāo)簽，從而實(shí)現(xiàn)過(guò)渡組件的功能，完整的組件 DOM 內(nèi)容如下，下面分段解釋一下

<div class="carousel-wrap" id="carousel">  // 輪播圖列表  <transition-group tag="ul" class='slide-ul' name="list">   <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">    <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >     <img :src="list.image" :alt="list.desc">    </a>   </li>  </transition-group>  // 輪播圖位置指示  <div class="carousel-items">   <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>  </div></div>

對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)如下：

data: {  slideList: [    {      "clickUrl": "#",      "desc": "nhwc",      "image": "http://dummyimage.com/1745x492/f1d65b"    },    {      "clickUrl": "#",      "desc": "hxrj",      "image": "http://dummyimage.com/1745x492/40b7ea"    },    {      "clickUrl": "#",      "desc": "rsdh",      "image": "http://dummyimage.com/1745x492/e3c933"    }  ],  currentIndex: 0,  timer: ''},

在使用 v-for 時(shí)，應(yīng)給對(duì)應(yīng)的元素綁定一個(gè) key 屬性，相當(dāng)于 index 標(biāo)識(shí)，在 <transition-group> 組件中，key 是必須的，這樣一個(gè)輪播圖的 DOM 結(jié)構(gòu)就完成了

接下來(lái)我們看看輪播函數(shù)的實(shí)現(xiàn)，再來(lái)看組件中的 li 元素

<li v-for="(list,index) in slideList" :key="index">  <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >   <img :src="list.image" :alt="list.desc">  </a></li>

上面通過(guò) v-for 渲染了 li 列表，并在其中插入了包含可點(diǎn)擊跳轉(zhuǎn)的圖片，接下來(lái)看看如何實(shí)現(xiàn)輪播，輪播圖的樣式直接在后面給出大家 sass 代碼，父元素 ul 設(shè)置 position: relative;overflow: hidden 后，li 大小設(shè)為和父元素相同，absolute 定位固定在父元素中，要讓 li 按照順序顯示，需要用到 v-show 或 v-if 處理，通過(guò) index 值來(lái)改變當(dāng)前顯示的 li ，本例 v-show 綁定條件