当圣诞雪橇飞到窗户前时，在设计上窗户会开打了。在圣诞中采用了"开门式"，"开门式"可以营造一个3d的感觉
"开门式"的效果：
左右2片窗户需要慢慢的向内打开，门在变化的过程中是需要有个3d的视角变化的，门内需要有一个背景图
简单的说下原理：
在"开门式"中需要用到rotateY与scale，通过对rotateY角度的变化，从而产生开门的视角，这里需要引入一些3d属性设置，具体在之前就已经学习过了，如果不记得了请看3D变换的梳理那一节
整个效果是JS+CSS结合处理的，分别定义在pageA.js中的openWindow方法，在pageA.css中，窗户的底边与阴影是采用的before与after伪元素增加的，减少了html结构
在openWindow方法中，动态的通过JS对"门"增加对应的样式，从而执行动画
this.$leftWin.addClass("window-transition").addClass("hover")
this.$rightWin.addClass("window-transition").addClass("hover")
window-transition：定义的一个transition过渡动画，
hover：定义了一个transform过渡动画执行的变换 scale(0.95) rotateY(60deg)
通过增加2个CSS样式后，“门”自然就会开了。
还要注意：为了衔接后续的动作，所以需要针对这个动画做监听，这样才能能确保动画之后执行之后的动作，这里监听transitionend事件
element.one("transitionend webkitTransitionEnd", function(event) {
complete()
})
注意必须要等2个动画都结束后才能执行后续的动作，是需要监听2个开门动作的动画完成了
var complete = function() {
++count
if (count === 2) {
callback && callback();
}
}
请在pageA.css代码143,147行处填入css样式，执行3d开窗的样式效果
左边：
缩放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;
}
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
