版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第7章過渡與動(dòng)畫
課程目標(biāo)本節(jié)將從CSS過渡transition、CSS動(dòng)畫animation及配合使用第三方CSS動(dòng)畫庫(如animate.css)這三方面來詳細(xì)介紹Vue過渡效果與Vue動(dòng)畫效果。2課程內(nèi)容
過渡與動(dòng)畫概述Transition組件過渡的命名單元素/組件的過渡實(shí)現(xiàn)過渡動(dòng)畫的三種方式多元素/組件的過渡綜合案例37.1簡述4Vue實(shí)現(xiàn)了過渡與動(dòng)畫，Vue的過渡系統(tǒng)可以在元素從DOM中插入或移除時(shí)，自動(dòng)應(yīng)用過渡效果。Vue.js會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為觸發(fā)CSS過渡或動(dòng)畫，也可以提供相應(yīng)JavaScript鉤子函數(shù)，在過渡過程中執(zhí)行自定義的DOM操作。7.1transition組件5在Vue中，提供了實(shí)現(xiàn)過渡動(dòng)畫的內(nèi)置組件transition?；居梅ň褪墙o我們需要?jiǎng)赢嫷臉?biāo)簽外面
嵌套transition標(biāo)簽，并且加上屬性。實(shí)現(xiàn)過渡動(dòng)畫一般格式：使用過渡組件transition。<transitionname=“fade”><!--需要?jiǎng)赢嫷膁iv標(biāo)簽--><div></div></transition>7.1transition組件6Vue提供了6個(gè)CSS類名在enter/leave的過渡中切換。7.1transition組件7
transition組件的具體使用，及CSS類名的使用。<!DOCTYPEhtml><html><head><metacharset-"utf-8"/><title>斤斗云學(xué)堂</title><style>.v-enter{opacity:0;}.v-enter-active{transition:opacity.5s;}.v-leave-active{transition:transfor.5s;}.v-leave-to{transform:translateX(10px);}</style>7.1transition組件8</head><body><divid="demo"><buttonv-on:click="show=!show">Toggle</button><transition><pv-if="show">我是精靈小天使</p></transition></div><scripttype="text/javascript"src="../js/Vue.js"></script><script>newVue({el:'#demo’,data:{show:true}})</script></body></html>7.1transition組件如果transition組件定義了name,這時(shí)所有“v-”開頭的class類名更換為“fade-”開頭。9<style>
.
fade-enter{opacity:0;
}
.fade-enter-active{
transition:opacity
.5s;}
.
fade-
leave-active{
transition:transform
.5s;}
.
fade-
leave-to{
transform:
translateX(10px);}
</style>7.2
單元素、組件的過渡Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加進(jìn)入/離開過渡。10條件渲染（使用v-if）組件根節(jié)點(diǎn)條件展示（使用v-show）動(dòng)態(tài)組件7.2
單元素、組件的過渡實(shí)現(xiàn)過渡動(dòng)畫通常有如下幾種方式:利用Vue中的鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫。利用animate.css結(jié)合transition實(shí)現(xiàn)動(dòng)畫。使用Vue的transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫7.2.1transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫常用的過渡使用通常使用CSS過渡。在代碼中設(shè)置CSS樣式來實(shí)現(xiàn)過渡fade-enter-active、fade-leave-active、fade-enter、fade-leave-to?！纠?-1】transition+css實(shí)現(xiàn)過渡動(dòng)畫：12<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/><title>斤斗云學(xué)堂</title><style>.
button{
width:400px;height:
40px;
line
-height:40px;
background-color
:#FFDAB9;text-align:center;}7.2.1transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫13p{
width:400px;margin:0;
background-color:
#FFFACD;}
.
fade-enter-active,.fade-leave-active
{
transition:
opacity
.5s;
}
.
fade-enter,.
fade-leave-to
/*.fade-leave-active
below
version
2.1.8*/{
opacity:
0;}
</style></head><body>
<div
id-“demo”>
<div
class=“button”
v-on:click=“show
=
!
show”
>
Toggle
</div>
<transition
name="fade">執(zhí)行變換屬性為透明，變換時(shí)間0.5毫秒。7.2.1transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫14
<p
v-if="show">斤斗云學(xué)堂(
http://www.hS)是一款專業(yè)學(xué)習(xí)
IT開發(fā)知識技能的慕課平臺，內(nèi)容涵蓋前端開發(fā)，JAVA，
大數(shù)據(jù)，電子商務(wù)等。斤斗云學(xué)堂已累計(jì)培養(yǎng)數(shù)千學(xué)員，使學(xué)員在IT學(xué)習(xí)和就業(yè)方面得到了很大的幫助，也愿意在你學(xué)習(xí)和就業(yè)的路上祝你一臂之力，實(shí)現(xiàn)騰飛斤斗云學(xué)堂現(xiàn)在每天都有千余名學(xué)生在線學(xué)習(xí)，平臺有完整的學(xué)習(xí)課件，題庫，作業(yè)系統(tǒng)，學(xué)員可以在線學(xué)課程，交作業(yè)。學(xué)生通過按照學(xué)習(xí)大綱要求，視頻學(xué)習(xí)，每節(jié)課測驗(yàn)，交作業(yè)，參加階段考試，項(xiàng)目實(shí)訓(xùn)，掌握開發(fā)技能。</p>
</transition>
</div>
<script
type="
text/javascript"
src="
../js/Vue.js"></script>
<script>
new
Vue({
el:
'#demo’,
data:{
show:
true
}
})</script>
</body>
</html>7.2.1transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫單擊Toggle顯示或隱藏段落，運(yùn)行結(jié)果如圖7-2所示。157.2.2animate.css結(jié)合transition實(shí)現(xiàn)動(dòng)畫首先來介紹下自定義過渡類名，在實(shí)現(xiàn)動(dòng)畫中會(huì)用到，可以通過以下特性來自定義過渡類名：16enter-active-classenter-classenter-to-classleave-classleave-active-classleave-to-class它們的優(yōu)先級高于普通的類名，對于Vue的過渡系統(tǒng)和其他第三方CSS動(dòng)畫庫，如animate.css相結(jié)合使用非常有用。7.2.2animate.css結(jié)合transition實(shí)現(xiàn)動(dòng)畫【例7-2】animate.css+transition實(shí)現(xiàn)動(dòng)畫17<!DOCTYPE
html><html><head>
<meta
charset=
“utf-8”
/>
<title>Vue自定義過渡類名</title>
<link
href=
"
https://cdn.
/
npm/animate.css@3.5.1"
rel="stylesheet"type=
"text/css">
</head><body>
<div
id="demo"
>
<button
@click="show
=
!
show">
Toggle
render<
/button>
7.2.2animate.css結(jié)合transition實(shí)現(xiàn)動(dòng)畫18<transition
name="
custom-classes
-transition"
enter-active-class="animated
tada"leave-active-class="
animated
bounceOutRight">
<p
v-if="show"
>hello</p></transition></div>
<script
src="../js/Vue.js"></script><script>new
Vue({
el:
'#demo’,data:
{
show:
true
}
})
</script></body></html>
7.2.2animate.css結(jié)合transition實(shí)現(xiàn)動(dòng)畫引入第三方animate.css動(dòng)畫文件，設(shè)定動(dòng)畫效果enter-active-class="animatedtada"leave-active-class="animatedbounceOutRight"。運(yùn)行結(jié)果如圖7-3所示。197.2.3鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫【例7-3】鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫20
<!DOCTYPE
html><html><head>
<meta
charset="UTF-8">
<meta
name
"viewport"
content=
"width=device-width,
initial-scale=1.0"><title>
使用Vue鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫</title><style>
.show
{
transition:
all
0.5s;}
</style></head><body>
<div
id=“app”>
<button
@click=“l(fā)oggle”>
顯示/隱藏</button><br>
<transition
@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"v-bind:css="false">
<div
class="show"
v-show-"isshow">hello
world</div></transition></div>
<script
src='.
./js/Vue.js"></script>7.2.3鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫21<script>new
Vue({
el:
'#app'
,data:{isshow:false}，
methods:{ toggle:function(){this-isshow=!this.isshow;}，
beforeEnter:function(el){console.log("beforeEnter”);el.style="padding-left:100px";}，
enter:function(el,done){el.offsetHeight;el.style="padding-left:0px";done();}，
afterEnter:function(el){console.log("afterEnter");}}})</script></body></html>7.2.3鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫例7-3運(yùn)行后單擊顯示/隱藏，helloworld從右向左過渡，再次單擊隱藏運(yùn)行結(jié)果如圖7-4所示227.3多個(gè)元素的過渡常見的多元素過渡是一個(gè)列表、表格或者描述這個(gè)列表表格，為空消息的元素，如下代碼片段。使用CSS過渡實(shí)現(xiàn)列表和標(biāo)簽的過渡。237.3多個(gè)元素的過渡使用CSS過渡實(shí)現(xiàn)列表<ul>和<p>標(biāo)簽的過渡使用fade-enter、fade-leave-to、fade-enter-active、fade-leave-active等CSS類名實(shí)現(xiàn)過渡單擊“清空數(shù)據(jù)”按鈕，過渡顯示<p>標(biāo)簽，單擊“重置”按鈕，重新加載data中的數(shù)據(jù)。2413. <divid="app">14. <button@click="clear">清空數(shù)據(jù)</button>15. <button@click="reset">重置</button>16. <transitionname="fade">17. <ulv-if="items.length>0">18. <liv-for="iteminitems">{{item}}</li>19. </ul>20. <pv-else>沒有顯示的數(shù)據(jù).</p>21. </transition>22. </div>23. <scriptsrc="../js/vue.js"></script>24. <script>25. newVue({26. el:'#app',27. data:{28. items:['JavaScript高級','Vue','CSS3']29. },30. methods:{31. clear:function(){32. this.items.splice(0);33. },34. reset:function(){35. history.go();36. }37. }38. })
單擊“清空數(shù)據(jù)”按鈕，過渡顯示<p>標(biāo)簽，單擊“重置”按鈕，重新加載data中的數(shù)據(jù)。多個(gè)元素的過渡兩個(gè)相同的標(biāo)簽，發(fā)現(xiàn)并沒
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年中考語文一輪復(fù)習(xí)：應(yīng)用文 練習(xí)題（含答案）
- 電梯清洗抱閘施工方案
- 2025年中考語文寫作復(fù)習(xí)：備考作文主題《山花爛漫時(shí)》演繹張桂梅的“燃燈精神”
- 石材露臺改造施工方案
- 市政防滑路面施工方案
- 2025年法律援助測試題及答案
- 低介電常數(shù)聚酰亞胺
- 4年級下冊英語手抄報(bào)1到5單元
- 4-庚氧基-1-丁醇用途
- 鋼塑門施工方案
- SL176-2007《水利水電工程施工質(zhì)量檢驗(yàn)與評定規(guī)程》
- 挖掘機(jī)液壓原理動(dòng)作分解
- 腹部CT應(yīng)用入門
- 2019版外研社高中英語選擇性必修二Unit 1 Growing up 單詞表
- 路基接觸網(wǎng)基礎(chǔ)技術(shù)交底
- （高清版）輻射供暖供冷技術(shù)規(guī)程JGJ142-2012
- JTT 1295—2019道路大型物件運(yùn)輸規(guī)范_(高清-最新）
- 土壤固化土施工技術(shù)導(dǎo)則
- VAR模型Johansen協(xié)整檢驗(yàn)在eviews中的具體操作步驟及結(jié)果解釋
- 冷凍面團(tuán)項(xiàng)目市場分析
- 加油站法律法規(guī)符合性評價(jià)
評論
0/150
提交評論