前面的話

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供右江網(wǎng)站建設(shè)、右江做網(wǎng)站、右江網(wǎng)站設(shè)計(jì)、右江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、右江企業(yè)網(wǎng)站模板建站服務(wù)，10多年右江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Vue 的過渡系統(tǒng)提供了非常多簡單的方法設(shè)置進(jìn)入、離開和列表的動效。那么對于數(shù)據(jù)元素本身的動效呢？包括數(shù)字和運(yùn)算、顏色的顯示、SVG 節(jié)點(diǎn)的位置、元素的大小和其他的屬性等。所有的原始數(shù)字都被事先存儲起來，可以直接轉(zhuǎn)換到數(shù)字。做到這一步，我們就可以結(jié)合 Vue 的響應(yīng)式和組件系統(tǒng)，使用第三方庫來實(shí)現(xiàn)切換元素的過渡狀態(tài)

狀態(tài)動畫

通過watcher，能監(jiān)聽到任何數(shù)值屬性的數(shù)值更新

 
 
{{ animatedNumber }}


 

當(dāng)把數(shù)值更新時，就會觸發(fā)動畫。這個是一個不錯的演示，但是對于不能直接像數(shù)字一樣存儲的值，比如 CSS 中的 color 的值，通過下面的例子來通過 Color.js 實(shí)現(xiàn)一個例子：

 
 Update
 
Preview:
 
 
{{ tweenedCSSColor }}


 

動態(tài)狀態(tài)轉(zhuǎn)換

就像 Vue 的過渡組件一樣，數(shù)據(jù)背后狀態(tài)轉(zhuǎn)換會實(shí)時更新，這對于原型設(shè)計(jì)十分有用。當(dāng)修改一些變量，即使是一個簡單的 SVG 多邊形也可以實(shí)現(xiàn)很多難以想象的效果

 
 Sides: {{ sides }}
 
 Minimum Radius: {{ minRadius }}%
 
 Update Interval: {{ updateInterval }} milliseconds
 

 

組件組織過渡

管理太多的狀態(tài)轉(zhuǎn)換會很快的增加 Vue 實(shí)例或者組件的復(fù)雜性，幸好很多的動畫可以提取到專用的子組件

  +
  =
 {{ result }}
 

  +
  =
 
 

以上這篇基于Vue過渡狀態(tài)實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。