Vue 过渡效果的组件
目錄
- 1. 單節點的過渡
- 1.1 應用場景
- 1.2 定義過渡效果的方式
1. 單節點的過渡
1.1 應用場景
Vue 提供了標簽為 transition 的 內置組件，在：
- 元素或組件初始渲染時；
- 元素或組件顯示/ 隱藏時(使用v-if 或早show 進行條件渲染時)；
- 元素或組件切換時。
我們可以給任何元素和組件添加進入/ 離開時的過渡動畫。
1.2 定義過渡效果的方式
Vue 允許用戶使用 CSS 和 JS 兩種方式來定義過渡效果。
使用 CSS 過渡：需預置符合Vue 規則的帶樣式的類名（用于定義過渡不同階段時的樣式:）
| v-enter | 定義進入過渡的開始狀態。在元素被插入前生效，被插入后的下一幀移除。 |
| v-enter-active | 定義進入過渡生效時的狀態o 在整個進入過渡階段中應用，在元素被插入之前生效，在過渡/ 動畫完成之后移除。這個類可以用來定義進入過渡的過程時間、延遲和曲線函數等。 |
| v-enter-to | ( Vue 2. l. 8 及以上版本)定義進入過渡結束時的狀態。在元素被插入后的下一幀生效(此時v-enter 被移除) ，在過渡/ 動畫完成之后移除。 |
| v-leave | :定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。 |
| v-leave-active | 定義離開過渡生效時的狀態o 在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/ 動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間、延遲和曲線函數。 |
| v-leave-to | ( Vue 2.1.8 版及以上版本)定義離開過渡的結束狀態o 在離開過渡被觸發之后下一幀生效(此時機leave 被移除)，在過渡/ 動畫完成之后移除。 |
當實例中存在多個不同的動畫效果時，我們可以使用自定義前綴替v-， 比如使用 slide-enter 替換 v-enter ， 不過這需要賦予transition元素name屬性。
name(類型為string）：用于自動生成 CSS 過渡類名。例如：name: ‘fade’ 將自動拓展為 .fade-enter，.fade-enter-active 等。默認類名為 “v”
過渡執行的各種階段和作用，舉例示意如下：
迸出過渡時（ transition ）效果如下：
-
使用 css 中的 animation 或第三方動畫庫 Animate.css
<!-- 引入動畫庫 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><!-- animated標識要執行動畫的元素， bounce標識所要執行的動畫效果， 此處為彈簧效果 --> <h1 class="animated bounce">彈簧動效</h1>
由于這些動畫庫有著不同的類名規則，無法與Vue 默認的類名規則配合使用， 因此Vue 為其提供了兼容方案，允許用戶自定義過渡的類名， 這些類名的優先級將高于默認的類名。
-
自定義過渡類名
我們可以使用以下特性來自定義過渡類名：
-
enter-class
-
enter-active-class
-
enter-to-class
-
leave-class
-
leave-active-class
-
leave-to-class
【案例效果】：
—— 由于動畫模式設置不夠準確，兩者的運行結果略有差異。【案例代碼】：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--引入 Animate.css 動畫庫--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><!-- 引入 Vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>div {width: 380px;height: 130px;margin: 100px auto;padding-left: 50px;border: 1px solid blueviolet;color: blueviolet;font-size: 24px;line-height: 130px;text-align: left;}.inline-block {display: inline-block;}.rotate-enter-active {animation: selfRotateIn 500ms;}.rotate-leave-active {animation: selfRotateOut 500ms;}/*命名避免與Animate.css 沖突*/ @keyframes selfRotateln {0% {opacity: 0;transform: rotateZ(-180deg)}100% {opacity: 1;transform: rotateZ(0deg)}}@keyframes selfRotateOut {0% {opacity: 1;transform: rotateZ(0deg)}100% {opacity: 0;transform: rotateZ(-180deg)}}</style> </head><body><div id="app"><button @click="isHidden =!isHidden">{{isHidden ? '點擊顯示':'點擊隱藏'}}</button><!-- 自定義動畫 --><transition name="rotate"><span class="inline-block" v-if="!isHidden">自定義動畫</span></transition><!-- animate.css 動畫 --><transition name="custom" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut"><span class="inline-block" v-if="!isHidden"> animate.css </span></transition></div><script>var vm = new Vue({el: '#app',data() {return {isHidden: true,}}})</script> </body></html>在開發中，使用進入過渡便可實現初始渲染時的過渡效果。除此之外，Vue 提供了專門的初始渲染過渡，這需要在transition元素上添加appear屬性。
注意：appear過渡 只支持自定義類名的過渡和JS 過渡，用法如下：
<transìtìonappear appear-class="custom-appear-class"appear-to-class="custom-appear-to-class"appear-active-class="custom-appear-active-class" ><!--... ...--> </transition>當需要顯示 / 隱藏多個相鄰的相同標簽的元素時，需要賦予元素唯一 key 值，讓Vue對元素進行跟蹤。
當元素key 值發生變化時，Vue 不會復用原有的元素，而將重建新元素。根據這一特點，就可以通過改變元素的 key 值來觸發過渡動畫，這常被用在元素切換時。
-
-
總結
以上是生活随笔為你收集整理的Vue 过渡效果的组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java-自定义注解
- 下一篇： GitHub博客开发上线实战