如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)
更新時(shí)間：2021年11月28日 10:07:29 作者：小豪boy
過(guò)渡Vue在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下
一、過(guò)渡和動(dòng)畫(huà)的區(qū)別
過(guò)渡：通常用來(lái)表示元素上屬性狀態(tài)的變化。
動(dòng)畫(huà)：通常用來(lái)表示元素運(yùn)動(dòng)的情況。
二、使用Vue實(shí)現(xiàn)基礎(chǔ)得css過(guò)渡與動(dòng)畫(huà)
1. 動(dòng)畫(huà)
/* css */
@keyframes leftToRight {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0);
}
}
.animation {
animation: leftToRight 3s;
}
// js
const app = Vue.createApp({
data() {
return {
animate: {
animation: true
}
}
},
methods: {
handleClick(){
this.animate.animation = !this.animate.animation
}
},
template: `
<div :class='animate'>hello</div>
<button @click='handleClick'>切換</button>
`
});
2. 過(guò)渡
/* css */
.transition {
transition: background-color 3s linear 0s;
}
.gold {
background-color: gold;
}
.cyan {
background-color: cyan;
}
// js
const app = Vue.createApp({
data() {
return {
animate: {
transition: true,
gold: true,
cyan: false
}
}
},
methods: {
handleClick() {
this.animate.gold = !this.animate.gold;
this.animate.cyan = !this.animate.cyan;
}
},
template: `
<div :class='animate'>hello</div>
<button @click='handleClick'>切換</button>
`
});
以上是通過(guò)設(shè)置class屬性實(shí)現(xiàn)的，同樣通過(guò)設(shè)置style屬性也可以實(shí)現(xiàn)：
/* css */
.transition {
transition: background-color 3s linear 0s;
}
// js
data() {
return {
transition: 'transition',
styleObject: {
backgroundColor: 'gold'
}
}
},
methods: {
handleClick() {
if(this.styleObject.backgroundColor === 'gold'){
this.styleObject.backgroundColor = 'cyan';
}else{
this.styleObject.backgroundColor = 'gold';
}
}
},
template: `
<div :class='transition' :style='styleObject'>hello</div>
<button @click='handleClick'>切換</button>
`
三、使用transition標(biāo)簽實(shí)現(xiàn)單元素/組件的過(guò)渡和動(dòng)畫(huà)效果
1. transition 的基本介紹
- <transition>?元素作為單個(gè)元素/組件的過(guò)渡效果。
- <transition>?只會(huì)把過(guò)渡效果應(yīng)用到其包裹的內(nèi)容上，而不會(huì)額外渲染 DOM 元素，也不會(huì)出現(xiàn)在可被檢查的組件層級(jí)中。
2. transition 的過(guò)渡class
在進(jìn)入/離開(kāi)的過(guò)渡中，會(huì)有 6 個(gè) class 切換：
- v-enter-from：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
- v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
- v-enter-to：定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
- v-leave-from：定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
- v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
- v-leave-to：離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
3. 過(guò)渡示例
將需要過(guò)渡的元素使用transition標(biāo)簽包裹。設(shè)置過(guò)渡需要的class，可從以上六種class中選擇。
/* css */
/* .v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: opacity 1s ease;
}
.v-enter-to {
opacity: 1;
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: opacity 1s ease;
}
.v-leave-to {
opacity: 0;
} */
/* 簡(jiǎn)寫(xiě) */
.v-enter-from, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s ease;
}
// js
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show;
}
},
template: `
<transition>
<div v-if='show'>hello</div>
</transition>
<button @click='handleClick'>切換</button>
`
});
4. 動(dòng)畫(huà)示例
使用動(dòng)畫(huà)效果只需要修改css部分，js部分功能不變。
/* css */
@keyframes shake-in {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0px);
}
}
@keyframes shake-out {
0% {
transform: translateX(50px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}
.v-enter-active{
animation: shake-in 1s ease-in;
}
.v-leave-active{
animation: shake-out 1s ease-in-out;
}
5. transition的name屬性
- name?-?string?：用于自動(dòng)生成 CSS 過(guò)渡類(lèi)名，不寫(xiě)默認(rèn)是v。
- name設(shè)置為hy，對(duì)應(yīng)的class名稱(chēng)也要改為hy開(kāi)頭。
// js
<transition name='hy'>
<div v-if='show'>hello</div>
</transition>
/* css */
.hy-enter-from, .hy-leave-to{
opacity: 0;
}
.hy-enter-active, .hy-leave-active{
transition: opacity 1s ease;
}
6. 自定義過(guò)渡類(lèi)名
我們可以通過(guò)以下 attribute 來(lái)自定義過(guò)渡類(lèi)名：
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
他們的優(yōu)先級(jí)高于普通的類(lèi)名，這對(duì)于 Vue 的過(guò)渡系統(tǒng)和其他第三方 CSS 動(dòng)畫(huà)庫(kù)，如?Animate.css. 結(jié)合使用十分有用。
// 首先引入樣式文件
<link rel="stylesheet" rel="external nofollow" />
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show;
}
},
// 以自定義過(guò)渡類(lèi)名的方式去添加動(dòng)畫(huà)樣式
template: `
<transition name='hy'
enter-active-class='animate__animated animate__bounce'
leave-active-class='animate__animated animate__bounce'>
<div v-if='show'>hello</div>
</transition>
<button @click='handleClick'>切換</button>
`
});
7. 同時(shí)設(shè)置過(guò)渡和動(dòng)畫(huà)
- 在一些場(chǎng)景中，你需要給同一個(gè)元素同時(shí)設(shè)置過(guò)渡和動(dòng)畫(huà)，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒(méi)結(jié)束。
- 在這種情況中，你就需要使用?type?attribute 并設(shè)置?animation?或?transition?來(lái)明確聲明你需要 Vue 監(jiān)聽(tīng)的類(lèi)型。
- type?-?string。指定過(guò)渡事件類(lèi)型，偵聽(tīng)過(guò)渡何時(shí)結(jié)束。有效值為?"transition" 和?"animation"。默認(rèn) Vue.js 將自動(dòng)檢測(cè)出持續(xù)時(shí)間長(zhǎng)的為過(guò)渡事件類(lèi)型。
在transition時(shí)間更長(zhǎng)時(shí)，使用type=‘transiton'的效果：
可以發(fā)現(xiàn)animation先完成，但transition并沒(méi)有終止會(huì)一致執(zhí)行完，元素才消失。
/* css */
@keyframes shake-in {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0px);
}
}
@keyframes shake-out {
0% {
transform: translateX(50px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}
.v-enter-from,
.v-leave-to {
color: red;
}
.v-enter-active {
animation: shake-in 1s ease-in;
transition: color 3s ease-in;
}
.v-enter-to, .v-leave-from {
color: green;
}
.v-leave-active {
animation: shake-out 1s ease-in-out;
transition: color 3s ease-in-out;
}
// js
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show;
}
},
template: `
<transition type='transition'>
<div v-if='show'>hello</div>
</transition>
<button @click='handleClick'>切換</button>
`
});
?
在transition時(shí)間更長(zhǎng)時(shí)，使用type=‘a(chǎn)nimation'的效果：
- 可以發(fā)現(xiàn)animation完成后，transition也會(huì)立即終止，元素也消失了。
<transition type='animation'>
<div v-if='show'>hello</div>
</transition>
8. duration 屬性
- duration?-?number | { enter: number, leave: number }：指定過(guò)渡的持續(xù)時(shí)間。
- 比css中設(shè)置的時(shí)間優(yōu)先級(jí)更高。
- 單位是：ms。
<transition :duration='100' >
<div v-if='show'>hello</div>
</transition >
你也可以定制進(jìn)入和移出的持續(xù)時(shí)間：
<transition :duration='{ enter: 1000, leave: 3000 }' >
<div v-if='show'>hello</div>
</transition >
9. 使用js實(shí)現(xiàn)動(dòng)畫(huà)
- 當(dāng)只用 JavaScript 過(guò)渡的時(shí)候，在?enter?和?leave?鉤中必須使用?done?進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過(guò)渡會(huì)立即完成。
- 添加?:css="false"，也會(huì)讓 Vue 會(huì)跳過(guò) CSS 的檢測(cè)，除了性能略高之外，這可以避免過(guò)渡過(guò)程中 CSS 規(guī)則的影響。
想要用js實(shí)現(xiàn)動(dòng)畫(huà)，可以在transition的 attribute 中聲明 JavaScript 鉤子：
| @before-enter="beforeEnter" | 進(jìn)入過(guò)渡前 |
| @enter="enter" | 進(jìn)入過(guò)渡時(shí) |
| @after-enter="afterEnter" | 進(jìn)入過(guò)渡后 |
| @enter-cancelled="enterCancelled" | 進(jìn)入過(guò)渡被打斷時(shí) |
| @before-leave="beforeLeave" | 離開(kāi)過(guò)渡前 |
| @leave="leave" | 離開(kāi)過(guò)渡時(shí) |
| @after-leave="afterLeave" | 離開(kāi)過(guò)渡后 |
| @leave-cancelled="leaveCancelled" | 離開(kāi)過(guò)渡被打斷時(shí) |
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show;
},
handleBeforeEnter(el){
el.style.color = 'red';
},
handleEnter(el, done){
const timer = setInterval(()=>{
if(el.style.color === 'red'){
el.style.color = 'blue';
}else{
el.style.color = 'red';
}
}, 1000);
setTimeout(()=>{
clearInterval(timer);
// 動(dòng)畫(huà)結(jié)束標(biāo)志
// 不執(zhí)行done()的話(huà)，handleAfterEnter不會(huì)執(zhí)行
done();
}, 3000)
},
handleAfterEnter(el){
console.log('success');;
}
},
template: `
<transition :css='false'
@before-enter='handleBeforeEnter'
@enter='handleEnter'
@after-enter='handleAfterEnter'
>
<div v-if='show'>hello</div>
</transition>
<button @click='handleClick'>切換</button>
`
});
// js
const app = Vue.createApp({
components: ['item-a', 'item-b'],
data() {
return {
component: 'item-a'
}
},
methods: {
handleClick() {
if (this.component === 'item-a') {
this.component = 'item-b';
} else {
this.component = 'item-a';
}
}
},
template: `
<transition mode='out-in' appear>
<component :is='component' />
</transition>
<button @click='handleClick'>切換</button>
`
});
app.component('item-a', {
template: `<div>hello</div>`
});
app.component('item-b', {
template: `<div>bye</div>`
});
四、組件和元素切換動(dòng)畫(huà)的實(shí)現(xiàn)
- mode?-?string?控制離開(kāi)/進(jìn)入過(guò)渡的時(shí)間序列。
- 有效的模式有?先出后進(jìn)：?"out-in"?和 先進(jìn)后出："in-out"；默認(rèn)同時(shí)進(jìn)行。
- 可以通過(guò)?appear?attribute 設(shè)置節(jié)點(diǎn)在初始渲染的過(guò)渡。
/* css */
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s ease-in;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
// js
const app = Vue.createApp({
components: ['item-a', 'item-b'],
data() {
return {
component: 'item-a'
}
},
methods: {
handleClick() {
if (this.component === 'item-a') {
this.component = 'item-b';
} else {
this.component = 'item-a';
}
}
},
template: `
<transition mode='out-in' appear>
<component :is='component' />
</transition>
<button @click='handleClick'>切換</button>
`
});
app.component('item-a', {
template: `<div>hello</div>`
});
app.component('item-b', {
template: `<div>bye</div>`
});
五、列表動(dòng)畫(huà)
- 使用 <transition-group> 組件，可以同時(shí)渲染整個(gè)列表。
- 內(nèi)部元素總是需要提供唯一的 key attribute 值。
- CSS 過(guò)渡的類(lèi)將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組/容器本身。
- <transition-group> 組件還有一個(gè)特殊之處。不僅可以進(jìn)入和離開(kāi)動(dòng)畫(huà)，還可以改變定位。要使用這個(gè)新功能只需使用新增的 v-move 類(lèi)。
/* css */
.inline-block {
display: inline-block;
margin-right: 10px;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
transform: translateY(30px);
}
.v-enter-active {
transition: all 1s ease;
}
.v-leave-active {
position: absolute;
}
.v-move {
transition: all 1s ease;
}
六、狀態(tài)動(dòng)畫(huà)
對(duì)于數(shù)據(jù)元素本身而言，通過(guò)數(shù)字和運(yùn)算、顏色的顯示、SVG 節(jié)點(diǎn)的位置、元素的大小和其他的 property 這些屬性的變化，同樣可以實(shí)現(xiàn)動(dòng)畫(huà)的效果。
數(shù)字變化示例：
const app = Vue.createApp({
data() {
return {
number: 1
}
},
methods: {
handleClick() {
const timer = setInterval(() => {
if (this.number >= 10) {
clearInterval(timer)
}else{
this.number++;
}
}, 100);
}
},
template: `
<div>{{number}}</div>
<button @click='handleClick'>增加</button>
`
});
?
總結(jié)
到此這篇關(guān)于如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
vuex里面有四個(gè)map方法，他們分別可以針對(duì)不同的元素進(jìn)行不同的代碼生成，本文就來(lái)詳細(xì)的介紹一下vuex中的四個(gè)map方法，具有一定的參考價(jià)值，感興趣的可以了解一下2023-05-05
如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題
這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文內(nèi)容主要參考官方教程，為了方便理解，用更加通俗的文字講解Vuex，也原文內(nèi)容做一些重點(diǎn)引用。希望會(huì)對(duì)你有所幫助。2017-07-07
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能實(shí)例代碼
我們平時(shí)經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue-router history模式服務(wù)器端配置過(guò)程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關(guān)于vue-router history模式服務(wù)器端配置的相關(guān)資料,需要的朋友可以參考下2021-06-06
本篇文章主要介紹了詳解如何使用webpack打包Vue工程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10