2. 程式人生 > 程式設計 >如何利用vue實現css過渡和動畫

如何利用vue實現css過渡和動畫

阿新 • • 發佈：2021-11-30
目錄
  • 一、過渡和動畫的區別
  • 二、使用實現基礎得過渡與動畫
    • 1. 動畫
    • 2. 過渡
  • 三、使用transition標籤實現單元素/元件的過渡和動畫效果
    • 1. transition 的基本介紹
    • 2. transition 的過渡class
    • 3. 過渡示例
    • 4. 動畫示例
    • 5. transition的name屬性
    • 6. 自定義過渡類名
    • 7. 同時設定過渡和動畫
    • 8. duration 屬性
    • 9. 使用實現動畫
  • 四、元件和元素切換動畫的實現
    • 五、列表動畫
      • 六、狀態動畫
        • 總結

          一、過渡和動畫的區別

          過渡：通常用來表示元素上屬性狀態的變化。

          動畫：通常用來表示元素運動的情況。

          二、使用Vue實現基礎得css過渡與動畫

          1. 動畫

          /* 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>
  www.cppcns.com
           
                <button @click='handleClick'>切換</button>
    `
});

          如何利用vue實現css過渡和動畫

          2. 過渡

          /* css */
.transition {
    transitiftUyGhWGon: 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>
    `
});

          如何利用vue實現css過渡和動畫

          以上是通過設定class屬性實現的，同樣通過設定style屬性也可以實現：

          /* css */
.transition {
    transition: background-color 3s linear 0s;
}
          // js
data() {
    return {
        transition: 'transition',styleObject: {
            backgroundColor: 'gold'
        }
    }
},methods: {
    handleClick() {
ftUyGhWG        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標籤實現單元素/元件的過渡和動畫效果

          1. transition 的基本介紹

          • <transition>元素作為單個元素/元件的過渡效果。
          • <transition>只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的元件層級中。

          2. transition 的過渡class

          在進入/離開的過渡中，會有 6 個 class 切換：

          • v-enter-from：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
          • v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。
          • v-enter-to：定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成之後移除。
          • v-leave-from：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
          • v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。http://www.cppcns.com
          • v-leave-to：離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from 被刪除)，在過渡/動畫完成之後移除。

          如何利用vue實現css過渡和動畫

          3. 過渡示例

          將需要過渡的元素使用transition標籤包裹。設定過渡需要的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;
} */
/* 簡寫 */
.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>
    `
});

          如何利用vue實現css過渡和動畫

          4. 動畫示例

          使用動畫效果只需要修改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;
}

          如何利用vue實現css過渡和動畫

          5. transition的name屬性

          • name-string：用於自動生成 CSS 過渡類名，不寫預設是v。
          • name設定為hy，對應的class名稱也要改為hy開頭。
            • // 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. 自定義過渡類名

          我們可以通過以下 attribute 來自定義過渡類名：

          • enter-from-class
          • enter-active-class
          • enter-to-class
          • leave-from-class
          • leave-active-class
          • leave-to-class

          他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如Animate.css. 結合使用十分有用。

          // 首先引入樣式檔案
<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
        }
    },// 以自定義過渡類名的方式去新增動畫樣式
    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. 同時設定過渡和動畫

          • 在一些場景中，你需要給同一個元素同時設定過渡和動畫，比如 animation 很快的被觸發並完成了，而 transition 效果還沒結束。
          • 在這種情況中，你就需要使用typeattribute 並設定animation或transition來明確宣告你需要 Vue 監聽的型別。
          • type-string。指定過渡事件型別，偵聽過渡何時結束。有效值為"transition" 和"animation"。預設 Vue.js 將自動檢測出持續時間長的為過渡事件型別。

          在transition時間更長時，使用type=‘transiton'的效果：

          可以發現animation先完成，但transition並沒有終止會一致執行完，元素才消失。

          /* 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
        }
    },template: `
        <transition type='transition'>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>切換</button>
    `
});

          如何利用vue實現css過渡和動畫

          在transition時間更長時，使用type=‘animation'的效果：

          • 可以發現animation完成後，transition也會立即終止，元素也消失了。
          <transition type='animation'>
    <div v-if='show'>hello</div>
</transition>

          如何利用vue實現css過渡和動畫

          8. duration 屬性

          • duration-number | { enter: number,leave: number }：指定過渡的持續時間。
          • 比css中設定的時間優先順序更高。
          • 單位是：ms。
          <transition :duration='100' >
    <div v-if='show'>hello</div>
</transition >

          你也可以定製進入和移出的持續時間：

          <transition :duration='{ enter: 1000,leave: 3000 }' >
    <div v-if='show'>hello</div>
</transition >

          如何利用vue實現css過渡和動畫

          9. 使用js實現動畫

          • 當只用 過渡的時候，在enter和leave鉤中必須使用done進行回撥。否則，它們將被同步呼叫，過渡會立即完成。
          • 新增:css="false"，也會讓 Vue 會跳過 CSS 的檢測，除了效能略高之外，這可以避免過渡過程中 CSS 規則的影響。

          想要用js實現動畫，可以在transition的 attribute 中宣告 Script 鉤子：

          @before-enter="beforeEnter" 進入過渡前
          @enter="enter" 進入過渡時
          @after-enter="afterEnter" 進入過渡後
          @enter-cancelled="enterCancelled" 進入過渡被打斷時
          @before-leave="beforeLeave" 離開過渡前
          @leave="leave" 離開過渡時
          @after-leave="afterLeave" 離開過渡後
          @leave-cancelled="leaveCancelled" 離開過渡被打斷時 
          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);
                // 動畫結束標誌
                // 不執行done()的話，handleAfterEnter不會執行
                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>
    `
});

          如何利用vue實現css過渡和動畫

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

          四、元件和元素切換動畫的實現

          • mode-string控制離開/進入過渡的時間序列。
          • 有效的模式有先出後進："out-in"和 先進後出："in-out"；默認同時進行。
          • 可以通過appearattribute 設定節點在初始渲染的過渡。
          /* 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',template: `
        <transition mode='out-in' appear>
            <component :is='component' />
        </transition>
        <button @click='handleClick'>切換</button&ghttp://www.cppcns.comt;
    `
});
app.component('item-a',{
    template: `<div>bye</div>`
});

          如何利用vue實現css過渡和動畫

          五、列表動畫

          • 使用 <transition-group> 元件，可以同時渲染整個列表。
          • 內部元素總是需要提供唯一的 key attribute 值。
          • CSS 過渡的類將會應用在內部的元素中，而不是這個組/容器本身。
          • <transition-group> 元件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需使用新增的 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;
}

          如何利用vue實現css過渡和動畫

          六、狀態動畫

          對於資料元素本身而言，通過數字和運算、顏色的顯示、SVG 節點的位置、元素的大小和其他的 property 這些屬性的變化，同樣可以實現動畫的效果。

          數字變化示例：

          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實現css過渡和動畫

          總結

          到此這篇關於如何利用vue實現css過渡和動畫的文章就介紹到這了,更多相關vue實現css過渡和動畫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

          相關推薦

          如何利用vue實現css過渡和動畫

          目錄一、過渡和動畫的區別二、使用實現基礎得過渡與動畫1. 動畫2. 過渡三、使用transition標籤實現單元素/元件的過渡和動畫效果 1. transition 的基本介紹 2. transition 的過渡class 3. 過渡示例4. 動畫示例5. tran

          利用Vue的v-for和v-bind實現列表顏色切換

          需求： 在頁面上顯示四個列表，初始時字型為黑色。 滑鼠點選某一個列表時，該列表的顏色變為紅色，其餘列表仍為黑色。

          css過渡和css動畫的區別是什麼？

          css3中出現很多新的特性，其中比較好玩的3D操作就是：過渡和動畫效果。那麼css過渡和css動畫的區別是什麼？下面本篇文章就來給大家介紹一下CSS中過渡和動畫的區別，希望對大家有所幫助。

          Vue過渡和動畫效果

          過渡 Vue 提供了transition的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡

          vue過渡和動畫總結

          vue官網一共介紹了以下幾種過渡： 1，單元素消失和顯示之間切換的過渡 1）單個節點

          vue專案利用loadsh實現防抖和節流

          lodash網址https://www.lodashjs.com/docs/lodash.debounce 防抖和節流應用場景 防抖 防抖，顧名思義，防止抖動，以免把一次事件誤認為多次，敲鍵盤就是一個每天都會接觸到的防抖操作。

          vue實現帶過渡效果的下拉選單功能

          本文例項為大家分享了vue中仿寫下拉選單功能，帶有過渡效果(移動端)，供大家參考，具體內容如下

          利用Flutter實現“孔雀開屏”的動畫效果

          前言 今天分享一個類似“孔雀開屏”的動畫效果，開啟新的頁面時，新的頁面從螢幕右上角以圓形逐漸開啟到全屏。

          vue實現導航選單和編輯文字的示例程式碼

          導航選單例項 <div id=\"main\"> <!-- 啟用的選單樣式為 active 類 --> <!-- 為了阻止連結在點選時跳轉，我們使用了 \"prevent\" 修飾符 (preventDefault 的簡稱)。 -->

          vue 實現setInterval 建立和銷燬例項

          問題 setInterval 是間隔呼叫，與之類似的還有 setTimeout。這兩個 API 通常用來做 ajax 短連線輪詢資料。

          如何利用vue實現波譜擬合詳解

          主頁面-功能介紹 小白初入職場第一篇總結，廢話比較多，求輕噴~ 波譜擬合用來對某種材料或物質的譜圖進行識別和分析，每種物質可以有多種成分，每種成分用component1、component2...表示，用Add another component和

          利用Vue實現簡易播放器的完整程式碼

          看b站某馬學習，實現一個屬於自己的播放器 HTML+CSS+JS <section id=\"xwyy\"> <!--主體區域-->

          Vue實現路由過渡動效的4種方法

          vue 路由過渡是對 Vue 程式一種快速簡便的增加個性化效果的的方法。 可以讓你在程式的不同頁面之間增加平滑的動畫和過渡。如果使用得當，可以使你的程式顯得更加專業，從而增強使用者體驗。

          Vue實現開始時間和結束時間範圍查詢

          本文例項為大家分享了實現開始時間和結束時間範圍的查詢方法，供大家參考，具體內容如下

          利用Vue實現天氣預報

          <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

          vue實現九宮格抽獎動畫效果

          vue實現九宮格抽獎動畫效果 html佈局九宮格程式碼： <div class=\"draw_box\"> <div

          過渡和動畫

          目錄過渡（transition)transition-property:指定要執行過渡的屬性transition-duration:指定過渡效果的持續時間transition-timing-function:過渡的時序函式transition-delay:過渡效果的延遲動畫

          Vue封裝的過渡與動畫

          Vue封裝的過渡與動畫 1.作用：在插入、更新或移除DOM元素時，在合適的時候給元素新增樣式類名。

          vue實現列表滾動的過渡動畫

          本文例項為大家分享了Vue實現列表滾動過渡動畫的具體程式碼，供大家參考，具體內容如下

          Vue實現Tab標籤路由效果並用Animate.css做轉場動畫效果的程式碼第1/3頁

          類似於瀏覽器視窗一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高階的玩意兒，奈何複雜的東西總是由簡單的東西拼接而成的，這個功能也不例外。