vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要歸納在 Vuejs 學習過程中對于 Vuejs 動畫效果的各個相關要點。由于本人水平有限，如文中出現錯誤請多多包涵并指正，感謝。如果需要看更清晰的代碼高亮，請跳轉至我的個人站點的
Vue 中的 CSS 動畫原理
將標簽外部添加?transition?標簽，將其包裹起來。他的原理圖如下，即當一個元素被transition?包裹之后，Vue 會自動分析元素的 CSS 樣式，然后構建一個動畫流程。
下面示例圖中的線和點，就可以稱之為一個動畫流程。Vue 會在動畫即將執行的瞬間，往內部被包裹的的?div?上增添兩個?class?名，分別是?fade-enter?和?fade-enter-active。當動畫第一幀執行結束之后；Vue 會在動畫執行到第二幀的時候，把之前添加的?fade-enter?這個?class?去除，然后再增加一個?fade-enter-to?的?class?名；接著動畫繼續執行，執行到結束的瞬間，Vue 會把之前添加的?fade-enter-active?和?fade-enter-to?兩個?class?都去除掉。
當動畫從顯示狀態變為隱藏狀態時，原理圖如下，流程跟上相似：
Vue 過渡動畫案例代碼
Vue中的css動畫原理opacity: 0;
}
.fade-enter-active {
transition: opacity 2s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 2s;
}
hello world
切換
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
}
}
})
JSbin 預覽
因為?transition?上設置的?name?屬性名為?fade。所以?style?中 CSS 樣式為?fade?開頭。如果?transition?上沒有設置?name?屬性名，那么style?中 CSS 樣式為?v?開頭，即?v-enter、v-center-active?等。
Vue 中使用 CCS3 @keyframes 動畫
keyframes 動畫0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
hello world
切換
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
}
}
})
自定義
如果 CSS 樣式沒有進行這種方式命名，而是我們通過自定義的方式命名的，如下：
.active {
transform-origin: left center;
animation: bounce-in 1s;
}
.leave {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
那么在?transition?標簽里面就要對這個自定義的?class?進行聲明。
enter-active-class="active"
leave-active-class="leave"
>
hello world
Animate.css 庫
Animate.css庫官網?提供了眾多 CSS 效果。引入和使用的原理和?iconfont?類似。
下載該庫之后，在?link?標簽下引入。
然后在?transition?標簽中定義?enter-active-class?與?leave-active-class?為?animate?庫中相應的樣式。下面示例即是入場動畫使用?swing，出場動畫使用?shake。
enter-active-class="animated swing"
leave-active-class="animated shake"
>
hello world
值得注意的是，當引入并使用 Animate.css 庫時，必須使用自定義?class?名的形式使用 Animate.css。同時，class?當中必須包含一個?animated?，然后再將相應的效果添加到?animated?之后。
appear
上面一節的示例中，當我們在頁面剛剛刷新時(第一次元素顯示時)也加上一些動畫效果，則需要加上?appear?和?appear-active-class?。
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
hello world
同時使用過渡和動畫
之前提到的?Animate.css 庫?提供的動畫是?@keyframes?類型 CSS3 的動畫。假如我們希望動畫不僅僅只有?@keyframes?的效果，還另外有過渡的動畫效果時。這個時候我們可以這樣進行代碼的編寫。
即在?animated?的?class?之后再添加 過渡動畫的 CSS?class。
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
type="transition"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
hello world
動畫執行時長：?值得注意的是，animate?之中的動畫執行是 1s，當過渡動畫超過 1s 時，在?transition?里面添加屬性?type?，就會以?transition?里面動畫的時長為動畫執行時長。同樣的，這個執行時長也可以自定義，通過?:duration?屬性來進行設置，例如當屬性被設置為?:duration="10000"?，即時長為 10s。除此之外，還可以單獨設置出場、入場動畫為不同的時長，:duration="{ enter: 5000, leave: 10000 }"。
Vue 中的 JS 動畫
動畫鉤子
before-enter
before-enter?會接收到一個參數?el?，即指的是動畫?transition?包裹的標簽。
hello world
切換
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
},
// 接收到一個參數 el 代指被包裹的標簽
handleBeforeEnter: function(el){
el.style.color = 'red'
}
}
})
enter
enter?會接收兩個參數，一個為?el，指的仍然是動畫?transition?包裹的標簽。 一個為?done，是一個回調函數。
hello world
切換
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
},
handleBeforeEnter: function(el){
el.style.color = 'red'
},
handleEnter: function(el, done){
setTimeout(() => {
el.style.color = 'green'
done()
},2000)
}
}
})
上面?handleEnter?中的?setTimeout?執行完之后，調用了?done()。而當done()?被調用的時候，Vue 又會觸發一個?after-enter?事件。
after-enter
after-enter?也要接收到參數?el?。
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
hello world
切換
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
},
handleBeforeEnter: function(el){
el.style.color = 'red'
},
handleEnter: function(el, done){
setTimeout(() => {
// 2s 之后改變顏色
el.style.color = 'green'
},2000)
setTimeout(() => {
// 4s 之后 done()
done()
},4000)
},
handleAfterEnter: function(el){
el.style.color = "#000"
}
}
})
出場動畫鉤子
相應的。出場動畫的鉤子函數為?before-leave?、leave?和?after-leave?。用法與上面所講的入場動畫鉤子函數相似。
動畫鉤子示例
velocity.js 動畫庫
在?velocityjs 官網?下載?velocity.js?文件。并通過?script?標簽引入?velocity.js。
按照下面的寫法，將?el、{opacity: 1}、{duration: 1000, complete: done}?當做參數傳遞給?Velocity?。
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
},
handleBeforeEnter: function(el){
el.style.opacity = 0
},
handleEnter: function(el, done){
Velocity(el, {opacity: 1}, {duration: 1000, complete: done})
},
handleAfterEnter: function(el){
alert('動畫結束')
}
}
})
多個元素與組件的過渡動畫
多個元素間過渡動畫
在下面的示例中，之所以加上?key?值，是為了讓 Vue 不去復用 DOM，達到我們想要的效果。給?transition?添加?mode?屬性，out-in?、in-out?分別表示多個屬性切換時候的不同的出場、入場順序效果。
hello worldBye World切換
多個組件間過渡動畫
在下面的示例中，兩個組件通過?button?點擊之后觸發的事件，進行內容的顯示和隱藏的切換。
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
切換
Vue.component('child',{
template: '
child'})
Vue.component('child-one',{
template: '
child-one'})
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
}
}
})
動態組件
除此之外也可以參考之前?深入理解 Vuejs 組件?中動態組件的方式。給?component?外邊的?transition?添加?mode。
列表過渡
參照下面 JSbin 中的示例，構造了一段代碼，簡單的實現了一個點擊?button?按鈕添加列表展示數據的 demo。現在我們要針對一整個列表，在增加或者刪除的時候實現過渡效果。這里就需要一個新的標簽?transition-group。
添加?transition-group?等同于給每一個?div?之外添加?transition。相當于把列表的過渡轉化成單個元素標簽的過渡。
除此之外跟前幾節的過渡動畫一樣，需要在?style?中添加相應的樣式。
動畫封裝
當需要頻繁使用一個動畫效果的時候，我們將動畫封裝到一個組件之中是很好的方法。結合之前的動畫鉤子，可以實現將模板、樣式都封裝到組件的效果。當需要使用的時候，直接使用該組件模板標簽，并添加相應的?show?屬性即可。
hello worldhello world
toggle
// 封裝 fade 子組件
Vue.component('fade',{
props: ['show'], // 接收父組件傳遞過來的 show 參數
// template 模板，并使用動畫鉤子將樣式封裝在函數中
template: `
@enter="handleEnter"
@after-enter="handleAfterEnter">
`,
methods: {
handleBeforeEnter: function(el){
el.style.color = 'red'
},
handleEnter: function(el,done){
setTimeout(() => {
el.style.color = 'green'
},2000)
setTimeout(() => {
done()
},4000)
},
handleAfterEnter: function(el){
el.style.color = "#000"
}
}
})
var vm = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function(){
this.show = ! this.show
}
}
})
總結
以上是生活随笔為你收集整理的vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redis雪崩原因_什么是redis雪崩
- 下一篇： TP-LINK TL-R860+ 路由器