小編給大家分享一下Vue實(shí)現(xiàn)過渡效果的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、渭源ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的渭源網(wǎng)站制作公司

以一個(gè)toggle按鈕控制p元素顯隱為例，如果不使用過渡效果，則如下所示

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <p v-if="show">藍(lán)色理想</p>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

如果要為此加入過渡效果，則需要使用過渡組件transition

過渡組件

Vue提供了transition的封裝組件，下面代碼中，該過渡組件的名稱為'fade'

 <transition name="fade">
  <p v-if="show">藍(lán)色理想</p>
 </transition>

當(dāng)插入或刪除包含在transition組件中的元素時(shí)，Vue會自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名

過渡類名

總共有6個(gè)(CSS)類名在enter/leave的過渡中切換

v-enter

定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除

v-enter-active

定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在元素被插入時(shí)生效，在 transition 或 animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)

v-enter-to

定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效(與此同時(shí) v-enter 被刪除)，在  transition 或 animation 完成之后移除

v-leave

定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除

v-leave-active

定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在離開過渡被觸發(fā)后立即生效，在 transition 或 animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)

v-leave-to

定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效(與此同時(shí) v-leave 被刪除)，在 transition 或 animation 完成之后移除

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴，表示過渡組件的名稱。比如，如果使用 <transition name="my-transition"> ，則 v-enter替換為 my-transition-enter

transition

常用的Vue過渡效果都是使用CSS過渡transition，下面增加一個(gè)enter時(shí)透明度變化，leave時(shí)位移變化的效果

<style>
.fade-enter{
 opacity:0;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 transition:transform .5s;
}
.fade-leave-to{
 transform:translateX(10px);
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

animation

CSS動畫animation用法同CSS過渡transition，區(qū)別是在動畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除

下面例子中，在元素enter和leave時(shí)都增加縮放scale效果

<style>
.bounce-enter-active{
 animation:bounce-in .5s;
}
.bounce-leave-active{
 animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="bounce">
  <p v-if="show">藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

同時(shí)使用

Vue 為了知道過渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽器。它可以是 transitionend 或 animationend ，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果使用其中任何一種，Vue 能自動識別類型并設(shè)置監(jiān)聽。

但是，在一些場景中，需要給同一個(gè)元素同時(shí)設(shè)置兩種過渡動效，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒結(jié)束。在這種情況中，就需要使用 type 特性并設(shè)置 animation 或 transition 來明確聲明需要 Vue 監(jiān)聽的類型

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
 animation:bounce-in 5s;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade" type="transition">
  <p v-if="show">藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true,
 },
})
</script>

自定義類名

可以通過以下特性來自定義過渡類名

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

自定義類名的優(yōu)先級高于普通的類名，這對于Vue的過渡系統(tǒng)和其他第三方CSS動畫庫，如 Animate.css 結(jié)合使用十分有用

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="external nofollow" >
<div id="example">
 <button @click="show = !show">
  Toggle render
 </button>
 <transition name="xxx" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
  <p v-if="show">藍(lán)色理想</p>
 </transition>
</div>
<script src="https://www.jb51.com/vue"></script>
<script>
new Vue({
 el: '#example',
 data: {
  show: true
 }
})
</script>

初始渲染過渡

可以通過 appear 特性設(shè)置節(jié)點(diǎn)的在初始渲染的過渡

<transition appear>
 <!-- ... -->
</transition>

這里默認(rèn)和進(jìn)入和離開過渡一樣，同樣也可以自定義 CSS 類名

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class"
>
 <!-- ... -->
</transition>

下面是一個(gè)例子

<style>
.custom-appear-class{
 opacity:0;
 background-color:pink;
 transform:translateX(100px);
} 
.custom-appear-active-class{
 transition: 2s;
}
</style>
<div id="demo">
 <button @click="reset">還原</button>
 <transition appear  appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class">
  <p>藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 methods:{
  reset(){
   history.go();
  }
 }
})
</script>

過渡時(shí)間

在很多情況下，Vue可以自動得出過渡效果的完成時(shí)機(jī)。默認(rèn)情況下，Vue會等待其在過渡效果的根元素的第一個(gè) transitionend 或 animationend 事件。然而也可以不這樣設(shè)定——比如，可以擁有一個(gè)精心編排的一序列過渡效果，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果

在這種情況下可以用<transition>組件上的duration屬性定制一個(gè)顯性的過渡效果持續(xù)時(shí)間 (以毫秒計(jì))

下面的代碼意味著元素在進(jìn)入enter和離開leave時(shí)，持續(xù)時(shí)間都為1s，而無論在樣式中它們的設(shè)置值為多少

<transition :duration="1000">...</transition>

也可以分別定制進(jìn)入和移出的持續(xù)時(shí)間

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

比如，下面的代碼中，進(jìn)入和移出的效果都為animate.css里面的shake效果，但持續(xù)時(shí)間分別是0.5s和1s

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
  <p v-if="show">小火柴的藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

過渡條件

一般地，在Vue中滿足下列任意一個(gè)過渡條件，即可添加過渡效果

條件渲染(使用v-if)

常見的條件是使用條件渲染，使用v-if

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">藍(lán)色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

條件展示(使用v-show)

使用條件展示，即使用v-show時(shí)，也可以添加過渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-show="show">藍(lán)色理想</p>
 </transition>
</div>

動態(tài)組件

使用is屬性實(shí)現(xiàn)的動態(tài)組件，可以添加過渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <component :is="view"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 components:{
  'home':{template:'<div>藍(lán)色理想</div>'}
 },
 data: {
  show: true,
 },
 computed:{
  view(){
   return this.show ? 'home' : '';
  }
 }
})

以上是“Vue實(shí)現(xiàn)過渡效果的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：Vue實(shí)現(xiàn)過渡效果的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article20/didico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站排名、電子商務(wù)、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)