<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] >[success] # 使用 transition 標簽實現單元素組件的過渡和動畫效果 接下來講解一下 **vue** 里面關于 **動畫** 和 **過渡效果** 的一些 **封裝** ,使用這些**封裝** , 能讓我們更加的方便去編寫 **vue** 里面的 **動畫** 和 **過渡效果** 。 >[success] ## 單組件的入場 / 出場動畫(過渡效果) **單元素** 或 **單組件** 的 **入場 / 出場** 動畫,只控制一個 **元素(或組件)** ,的**顯示隱藏** 狀態,就叫做 **單元素** 或 **單組件** ,元素從 **展示變成隱藏這就叫做出場** ,從 **隱藏變成展示就叫做入場** , **vue** 給我們提供了 **transition** 標簽,我們可以通過 **transition** 標簽來做 **入場、出場動畫** 。 **transition** 需要配合著一些 **樣式** 才會好用,具體需要哪些樣式呢,如下: | class類名 | 說明 | | --- | --- | | **入場動畫**:| | | .v-enter-from | 入場效果, **最初展示的模樣** | | .v-enter-active | 入場動畫的 **過渡(過程)** | | .v-enter-to | 入場 **動畫結束** 時候 | | **出場動畫**: | | | .v-leave-from | 出場效果 | | .v-leave-active | 出場動畫的過渡(過程) | | .v-leave-to | 入場 **動畫結束** 時候 | 使用案例如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>單組件的入場 / 出場動畫</title> <style> /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from { opacity: 0; } /* 入場動畫的過渡(過程) */ /* .v-enter-active { transition: opacity 3s ease-out; // 單獨寫可以自定義過渡效果的不同 }*/ /* 結束時候 */ .v-enter-to { opacity: 1; } /* --------------------出場動畫----------------------- */ /* 出場效果(可以不寫,因為出場動畫出現的一瞬間本身就是顯示的狀態)*/ .v-leave-from { opacity: 1; } /* 出場動畫的過渡(過程) */ /* .v-leave-active { transition: opacity 3s ease-in; // 單獨寫可以自定義過渡效果的不同 } */ /* 結束時候 */ .v-leave-to { opacity: 0; } /* --------------------上面的.v-enter-active .v-leave-active 可以放在一起寫----------------------- */ .v-enter-active, .v-leave-active{ transition: opacity 3s ease-out; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 動畫效果 動畫只需要依賴 **.v-enter-active** 與 **.v-leave-active** 以及一個寫好的 **@keyframes** 關鍵幀動畫,即可完成一個動畫的效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動畫效果</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { animation: shake 3s; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 給class重命名 上面的 **動畫類名** 都是 **.v-enter-to** 或 **v-enter-from**,都是以 **v** 開頭 ,其實我們是可以給這個 **class 重命名** 的,只需要給 **transition標簽** , 添加一個 **name屬性** 即可。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>給class重命名</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡(過程) */ .hello-enter-active { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .hello-leave-active { animation: shake 3s; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition name="hello"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 注意: 上面的動畫不僅可以使用 **v-if** 來控制, 也可以使用 **v-show** 。 >[success] ## 自定義class 同時這個 **transition標簽** 的 **class** 也支持 **自定義class** ,自己來依自己的習慣叫自己喜歡的名字,例如想修改 **.v-enter-active** 這個類名,只需要在 **transition標簽** 上添加 **enter-active-class** 屬性來自定義類名即可 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定義class</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場動畫的過渡(過程) */ .hello { animation: shake 3s; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .bay { animation: shake 3s; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition enter-active-class="hello" leave-active-class="bay" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 自定義class結合animate.css使用 **animate.css** 的具體使用教程,請[點擊這里](https://animate.style/) 首先 **通過cdn** 的方式引入 **animate.css** ,在使用**animate.css**中的 **任何class動畫類名** 都需要與 **animate__animated** 類名一同使用,而且配合使用 **自定義class** ,可以很方便的 **和第三方的動畫庫相結合** ,例子如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定義class結合animate.css使用</title> <!-- 引入animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition enter-active-class="animate__animated animate__backInDown" leave-active-class="animate__animated animate__flash" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 過渡與動畫同時觸發 有些時候我們 **不僅希望只有在顯示隱藏元素的瞬間有過渡的效果,我們同時希望有動畫的效果** ,我們可能還想讓 **字體顏色** 也有改變的效果,或者 **坐標位置** 有所改變,等等一系列更多的效果,下面的代碼在有 **過渡** 的同時候也改變了 **字體顏色** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>過渡與動畫同時觸發</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; transition: color 3s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 3s; transition: all 3s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 根據animation或transition來決定動畫執行時間 接下來看我們的代碼中 **animation** 的過渡效果是 **10s** , **transition** 的動畫效果是 **3s**,這樣動畫就會出現 **3s** 的先執行結束,然后漫長的等 **10s** 的過渡效果 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>根據animation或transition來決定動畫執行時間</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 10s; transition: color 3s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 10s; transition: all 3s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 假如我們有一個需求,想讓 **過渡時間與動畫時間相同,或動畫時間與過渡時間相同** ,該怎么做呢? 我們只需要在 **transition標簽** 上添加一個 **type** 屬性, **type** 屬性等于 **transition** 時,就是 **以過渡效果的時間為準** , **type** 屬性等于 **animation** 時,就是 **以動畫效果的時間為準** ,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>根據animation或transition來決定動畫執行時間</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition type="animation"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## duration(持續時間)屬性 像上面的 **根據animation或transition來決定動畫執行時間例子** 很不易懂,我們通過使用 **duration屬性實現同樣的效果** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration(持續時間)屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition :duration="1000"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **:duration="1000"** 的意思就是不論是 **過渡時間** 還是 **動畫時間** ,都執行 **1000毫秒(1秒)** ,雖然 **css樣式** 中寫了 **3s** 與 **10s** ,我只執行 **duration** 屬性設置的 **1s** 。 **duration屬性** 的值也可以設置為 **對象形式** ,**:duration="{ enter:1000, leave: 3000 }"** 意思是 **入場動畫1秒,出場動畫3秒** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration(持續時間)屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div> <transition :duration="{ enter:1000, leave: 3000 }"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 用 js 做動畫 我們上面講解的,還是 **使用css做動畫** ,那我們如何使用 **js** 去做動畫呢,首先在 **transition標簽** 上添加 **:css="false"** ,意思就是 不使用 **transition** 來做 **css動畫** ,然后做 **js動畫**的話, **vue** 提供給了我們一些 **鉤子(某些時刻會自動調用的函數)** ,如下表格: | 鉤子名稱 | 鉤子說明 | 回調參數說明 | | --- | --- | --- | | **入場動畫鉤子**: | | | @before-enter | 進入入場動畫之前時 | **參數1:el:vue返回的dom元素** | | @enter | 開始執行入場動畫時 | **參數1:el:vue返回的dom元素<br>參數2:done: done方法可以停止動畫** | | @after-enter | 入場動畫結束時 | **參數1:el:vue返回的dom元素** | | **出場動畫鉤子**: | | | @before-leave | 出場動畫之前時 | **參數1:el:vue返回的dom元素** | | @leave | 開始執行出場動畫時 | **參數1:el:vue返回的dom元素<br>參數2:done: done方法可以停止動畫** | | @after-leave | 出場動畫結束時 | **參數1:el:vue返回的dom元素** | 具體例子使用方法如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>duration(持續時間)屬性</title> <style> /* 關鍵幀 */ @keyframes shake { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } /* --------------------入場動畫----------------------- */ /* 入場效果*/ .v-enter-from{ color: red; } /* 入場動畫的過渡(過程) */ .v-enter-active { animation: shake 3s; transition: color 10s ease-in; } /* --------------------出場動畫----------------------- */ /* 出場動畫的過渡(過程) */ .v-leave-active { color: red; animation: shake 3s; transition: color 10s ease-in; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 單元素,單組件的入場出場動畫 const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show }, /** * 進入入場動畫之前時 * @param {Object} el - vue傳遞過來的dom元素 */ // ------------------------入場動畫--------------------------- handleBeforeEnter(el){ el.style.color = 'red' }, /** * 開始執行入場動畫時 * @param {Object} el - vue傳遞過來的dom元素 * @param {Funcion} done - done方法可以停止動畫 */ handleEnterActive(el, done){ // 執行動畫 const animate = setInterval(() => { const color = el.style.color if(color === 'red') { el.style.color = 'green' } else { el.style.color = 'red' } }, 1000); // 3秒后清除動畫 setTimeout(() => { clearInterval(animate) // 1. 注意:如果不主動調用done方法,程序不會知道動畫是否結束, // 也不會去走【動畫結束的鉤子函數】 done() }, 3000); }, /** * 入場動畫結束時 */ handleEnterEnd(){ // 2. 上面的方法中調用【done】后,才會執行該方法中的邏輯 alert('入場動畫結束時') }, // ------------------------出場動畫--------------------------- /** * 出場動畫之前時 * @param {Object} el - vue傳遞過來的dom元素 */ handleBeforeLeave(el){ alert('出場動畫之前') }, /** * 開始執行出場動畫時 * @param {Object} el - vue傳遞過來的dom元素 * @param {Funcion} done - done方法可以停止動畫 */ handleLeaveActive(el, done){ alert('開始執行出場動畫') done() }, /** * 出場動畫結束時 */ handleLeaverEnd(el){ alert('出場動畫結束') } }, template: ` <div> <transition :css="false" @before-enter="handleBeforeEnter" @enter="handleEnterActive" @after-enter="handleEnterEnd" @before-leave="handleBeforeLeave" @leave="handleLeaveActive" @after-leave="handleLeaverEnd" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看