vue.js之過渡效果-css

概述

vuejs的過渡效果可以讓我們的頁面元素在出現和消失時實現過渡。官方文檔這樣描述過渡效果的方式：

在 CSS 過渡和動畫中自動應用 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鈎子函數中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

 

簡單而言就是，你可以使用vue的<transition></transition>組件，結合css的動畫(animation),過渡(transition),或者javascript操作dom來讓你的元素或者組件動起來。

而在引用css和javascript中，你可以自己寫，也可以利用現成的css或者javascript的第三方庫。

css過渡/動畫

css過渡就是僅使用transition完成的效果。大概的結構長這個樣子：

//html
<transition name="xxx">
    <p v-if="show">hello</p>//這里是你要過渡的元素或者組件，包裹在transition標簽里
  </transition>
//css
.xxx-enter-active {
  transition: all .3s ease;
}
.xxx-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.xxx-fade-enter,.xxx-leave-active {
  transform: translateX(10px);
  opacity: 0;
}

這里出現了一個叫xxx的同學，這就是給過渡組件起的名字，這樣，vue就會到css中去找前綴名為xxx的類。並應用在組件里面的元素上面。

這四個css類的后綴名各不相同，分別是

enter,leave,enter-active,和leave-active,

這四個后綴分別代表:

進入過渡開始，離開過渡開始，進入過渡開始到進入過渡結束，離開過渡開始到離開過渡結束。

css過渡說白了就是動態加上和去掉相應的class實現的。比如說下面這個小方塊（圖片來自vue官網），進入開始時，透明度是0（加上了 .xxx-fade-enter class造成的opacity=0

），中間過程又加上了(.xxx-enter-active）。進入結束時，過渡效果完成，透明度是1，vue把上面加的class都去掉。離開開始時，透明度是1，中間過程加上（xxx-enter-active class）此時元素的css樣式如下：

transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

opacity:0;
tansfrom:translateX(10px) 

離開結束時，透明度是0,此時v-if也在起作用，最終是元素從dom中消失，有興趣的話可以F12看官網的demo,就能豁然開朗了。

 

css動畫

css動畫就要用到css3的animation了，對於自己寫的動畫，用法與上面的過渡基本相同：

<div id="demo">
  <button @click="show = !show">
    Toggle {{show}}
  </button>
  <transition name="boom">
    <p v-if="show" id='circle'></p>
  </transition>
</div>

//css
.boom-enter-active{//boom 是過渡名稱 in,out是兩個動畫，動畫寫到進入和離開結束的class中
animation:in .5s;
}
.boom-leave-active{
animation:out .5s;
}
@keyframes  in {//in動畫
0% {
    transform: scale(2);
  opactity:0;
  }
  50% {
    transform: scale(1.5);
opactity:0.5;
  }
  100% {
    transform: scale(1);
opactity:1;
  }
}
@keyframes  out {//out 動畫
0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
opactity:0;
  }
}


//js
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

 其實日常使用中還是使用css庫更方便。這時要用到

• enter-class
• enter-active-class
• leave-class
• leave-active-class


四個自定義屬性，這里說是屬性，是因為，這些不是寫在css中，而是寫在<transition>標簽中的屬性.使用animate.css庫,就在enter-active-class，leave-active-class屬性名下填入對應的動畫名即可，animated是必須填的。

<transition
    enter-active-class="animated rollIn"//屬性名=屬性值
    leave-active-class="animated rollOut"
  >
    <p v-if="show">hello</p>
  </transition>

 trainsition mode

transition mode有兩種模式

• in-out：新元素先進行過渡，完成之后當前元素過渡離開。

• out-in：當前元素先進行過渡，完成之后新元素過渡進入。

使用mode時，要注意給trainsiton下面的元素綁定key,否則可能看不到過渡效果

借助過渡模式，我們可以寫一個消息滾動條。效果如下：