第三个场景增加pageC.js与pageC.css2个文件，场景内的元素，月亮、星星、圣诞树和云的实现之前都已经讲解过了，这里不再重复。具体看下关窗的实现的与canvas版的雪花效果
关窗的同时，背景会有一个渐隐渐现的替换效果，这里会采用2张图做交替动画，一张隐藏一张显示，因此同时会有3个动画在进行
参考pageC.js与pageC.css代码区域：
背景图切换
在静态HTML布局中，给2张不同的切换节设置opacity属性控显示与隐藏的状态，
<div class="window-scene-bg"></div> //1 <div class="window-close-bg"></div> //0
在脚本代码处，同时给2个背景节点增加opacity的控制，这样达到渐隐渐现的切换效果
this.$sceneBg.transition({
opacity: 0,
}, 3000);
this.$closeBg.transition({
opacity: 1
}, 5000);
关窗动画
通过脚本控制给对应的“门”增加关门的样式，通过animation动画，控制元素的scale、rotateY鱼与rotateZ值的变化。
element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
complete()
})
给左右2个门增加"close"样式控制，然后绑定一个one事件监听动画的处理完成，这样才能衔接到后续的动作了（这里需要注意animation是2组动画，需要判断下2组动画全部结束）
在pageC.js文件中的31行出填入任务代码
给左右2片窗户增加开窗效果，然后监听窗户的动作完毕后调用回调函数
提示：
this.$leftWin ，this.$rightWin 是左右2个窗户元素
class=close是关窗的样式，调用了css3的动画
css3的动画事件名是：animationend
var count = 1;
var complete = function() {
++count
if (count === 2) {
alert("窗户关闭")
}
}
var bind = function(element) {
element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
complete()
})
}
bind(this.$leftWin)
bind(this.$rightWin)
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
Copyright 
2025 imooc.com All Rights Reserved | 京ICP备12003892号-11
