中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中如何使用transition內置組件

發布時間:2021-07-21 14:47:54 來源:億速云 閱讀:138 作者:Leah 欄目:web開發

這篇文章給大家介紹vue中如何使用transition內置組件,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

基本概念

Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果

  • 在 CSS 過渡和動畫中自動應用 class

  • 可以配合使用第三方 CSS 動畫庫,如 Animate.css

  • 在過渡鉤子函數中使用 JavaScript 直接操作 DOM

  • 可以配合使用第三方 JavaScript 動畫庫,如 Velocity.js

簡單用法

  • v-if/v-show 控制顯示隱藏,使用transition 組件控制其變化過程

  • 一個頁面子組件 router-view 的消失隱藏,使用transition 組件控制其變化過程

<template>
// 子組件
	<transition name="fade1">
 	<router-view></router-view>
	</transition>
// if/show控制
	<transition name="fade2">
 	<div v-show="isTage"></div>
	</transition>
</template>

類名介紹

  1. v-enter :定義進入過渡的開始狀態。在元素被插入之前生效,在元素被插入之后的下一幀移除。

  2. v-enter-active :定義進入過渡生效時的狀態。在整個進入過渡的階段中應用,在元素被插入之前生效,在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間,延遲和曲線函數。

  3. v-enter-to : 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除),在過渡/動畫完成之后移除。

  4. v-leave : 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除。

  5. v-leave-active :定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函數。

  6. v-leave-to : 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除),在過渡/動畫完成之后移除。

以上為vuejs官網介紹 下面我平時記載的筆記,結合圖文,更容易理解些

變化原理

vue中如何使用transition內置組件 

vue中如何使用transition內置組件 

動畫流程出現:

開始前一幀: 點擊出現動畫,元素由none變為block,動畫開始前一幀,插入 opacity:0 屬性 “1” ,和監聽opacity屬性變化時間為3s “2”

動畫第二幀: opacity:0 ,屬性 “1” 去除,引起**“2”**監聽執行時間變化

動畫最后一幀: 動畫結束,去除所有

vue中如何使用transition內置組件

 動畫流程消失:

開始前一幀: 點擊消失動畫,元素由block變為none,動畫開始前一幀,只插入監聽opacity屬性變化時間為3s “4”

動畫第二幀: 插入, “3” 屬性opacity:0引起 “2” 監聽執行事件變化

動畫最后一幀: 動畫結束,去除所有

關于vue中如何使用transition內置組件就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

白玉县| 巫山县| 揭西县| 乌海市| 西贡区| 汉中市| 麻城市| 抚顺市| 清涧县| 江西省| 沁水县| 上林县| 革吉县| 桐庐县| 花垣县| 古蔺县| 新和县| 呼图壁县| 克什克腾旗| 民丰县| 门头沟区| 克山县| 通化县| 延吉市| 西峡县| 泰兴市| 石景山区| 绿春县| 莱芜市| 平阳县| 航空| 祁门县| 定襄县| 嘉义县| 邹城市| 张家口市| 武山县| 于都县| 西吉县| 杨浦区| 龙门县|