手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3動畫和轉場效果

發布時間:2023-04-17 17:02:15???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

學習要點:
1.轉場效果
本節課我們來開始學習 Vue3.x 的動畫和轉場效果的簡單演示。
一.轉場效果
1. 動畫效果并不是 Vue 的核心功能,這里簡單的了解下即可,原因如下:
(1) . 內容不難,但繁雜(主要 CSS 調用多);
(2) . 學了一個,其它的參考手冊,對應著搭建即可完成效果;
2. 我們就選擇一個講解即可,“進場和離場”效果用的比較多一些;
3. 創建一個按鈕、要切換進場和離場的內容,以及設置默認顯示的屬性;
<div id="app">
<p v-if="show">顯示/隱藏p>
<button>切換{{show}}button>
div>
data() {
return {
show : true
}
}
4. 用一個表達式來實現簡單的布爾值的切換功能,具體如下:
<button v-on:click="show = !show">切換{{show}}button>
5. 構建所需進場和離場的 CSS,推薦復制官方的,然后根據自己需求修改;
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
style>
6. 最后一步,使用 Vue 的效果組件來實現過渡效果;
<transition name="fade">
<p v-if="show">顯示/隱藏p>
transition>
PS:這是手冊上的第一個小案例,我們一句句分析一下;
(1) .show : true,用于判斷 dom 節點 p 狀態;
(2) .show = !show,注意這里不是!=,而是!show,表示 show=true|false;
(3) .Vue 過渡動畫組件,包含在里面才能實現動畫效果;
(4) .name=fade,定義 CSS 樣式的前綴名稱,都已 fade 為前綴;
PS:在進入過渡或離開的過程中,有 6 class 可供切換,沒有 name 默認為 v
(1) .v-enter:進入過渡的開始狀態;
(2) .v-enter-active:進入過渡的生效狀態;
(3) .v-enter-to:進入過渡的結束狀態;
(4) .v-leave:離開過渡的開始狀態;
(5) .v-leave-active:離開過渡的生效狀態;
(6) .v-leave-to:離開過渡的結束狀態;
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕