怎么利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)

這篇文章主要講解了“怎么利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)”吧！

一、過(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)定義進(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)定義離開(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ò)渡類名，不寫(xiě)默認(rèn)是v。

• name設(shè)置為hy，對(duì)應(yīng)的class名稱也要改為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ò)渡類名

我們可以通過(guò)以下 attribute 來(lái)自定義過(guò)渡類名：

• enter-from-class

• enter-active-class

• enter-to-class

• leave-from-class

• leave-active-class

• leave-to-class

他們的優(yōu)先級(jí)高于普通的類名，這對(duì)于 Vue 的過(guò)渡系統(tǒng)和其他第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css. 結(jié)合使用十分有用。

// 首先引入樣式文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow"  />
 
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    // 以自定義過(guò)渡類名的方式去添加動(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)的類型。

• type - string。指定過(guò)渡事件類型，偵聽(tīng)過(guò)渡何時(shí)結(jié)束。有效值為 "transition" 和 "animation"。默認(rèn) Vue.js 將自動(dòng)檢測(cè)出持續(xù)時(shí)間長(zhǎng)的為過(guò)渡事件類型。

在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 鉤子：

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()的話，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ò)渡的類將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組/容器本身。

• <transition-group> 組件還有一個(gè)特殊之處。不僅可以進(jìn)入和離開(kāi)動(dòng)畫(huà)，還可以改變定位。要使用這個(gè)新功能只需使用新增的 v-move 類。

/* 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>
    `
});

感謝各位的閱讀，以上就是“怎么利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！