當(dāng)圣誕雪橇飛到窗戶前時(shí)，在設(shè)計(jì)上窗戶會(huì)開(kāi)打了。在圣誕中采用了"開(kāi)門式"，"開(kāi)門式"可以營(yíng)造一個(gè)3d的感覺(jué)
"開(kāi)門式"的效果：
左右2片窗戶需要慢慢的向內(nèi)打開(kāi)，門在變化的過(guò)程中是需要有個(gè)3d的視角變化的，門內(nèi)需要有一個(gè)背景圖
簡(jiǎn)單的說(shuō)下原理：
在"開(kāi)門式"中需要用到rotateY與scale，通過(guò)對(duì)rotateY角度的變化，從而產(chǎn)生開(kāi)門的視角，這里需要引入一些3d屬性設(shè)置，具體在之前就已經(jīng)學(xué)習(xí)過(guò)了，如果不記得了請(qǐng)看3D變換的梳理那一節(jié)
整個(gè)效果是JS+CSS結(jié)合處理的，分別定義在pageA.js中的openWindow方法，在pageA.css中，窗戶的底邊與陰影是采用的before與after偽元素增加的，減少了html結(jié)構(gòu)
在openWindow方法中，動(dòng)態(tài)的通過(guò)JS對(duì)"門"增加對(duì)應(yīng)的樣式，從而執(zhí)行動(dòng)畫(huà)
this.$leftWin.addClass("window-transition").addClass("hover")
this.$rightWin.addClass("window-transition").addClass("hover")
window-transition：定義的一個(gè)transition過(guò)渡動(dòng)畫(huà)，
hover：定義了一個(gè)transform過(guò)渡動(dòng)畫(huà)執(zhí)行的變換 scale(0.95) rotateY(60deg)
通過(guò)增加2個(gè)CSS樣式后，“門”自然就會(huì)開(kāi)了。
還要注意：為了銜接后續(xù)的動(dòng)作，所以需要針對(duì)這個(gè)動(dòng)畫(huà)做監(jiān)聽(tīng)，這樣才能能確保動(dòng)畫(huà)之后執(zhí)行之后的動(dòng)作，這里監(jiān)聽(tīng)transitionend事件
element.one("transitionend webkitTransitionEnd", function(event) {
complete()
})
注意必須要等2個(gè)動(dòng)畫(huà)都結(jié)束后才能執(zhí)行后續(xù)的動(dòng)作，是需要監(jiān)聽(tīng)2個(gè)開(kāi)門動(dòng)作的動(dòng)畫(huà)完成了
var complete = function() {
++count
if (count === 2) {
callback && callback();
}
}
請(qǐng)?jiān)趐ageA.css代碼143,147行處填入css樣式，執(zhí)行3d開(kāi)窗的樣式效果
左邊：
縮放0.95倍，rotateY角度是60，top=0.1rem left= - 0.25rem
右邊：
縮放0.95倍，rotateY角度是-60，top=0.1rem left= -0.25rem
.window-left.hover {
-webkit-transform: scale(0.95) rotateY(60deg);
-moz-transform: scale(0.95) rotateY(60deg);
margin-top: 0.1rem;
margin-left: -0.25rem;
}
.window-right.hover {
-webkit-transform: scale(0.95) rotateY(-60deg);
-moz-transform: scale(0.95) rotateY(-60deg);
margin-top: 0.1rem;
margin-right: -0.25rem;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)