小女孩与小男孩在代码结构与技术的实现上基本是一致的，参考右边pageB.js与pageB.css的实现代码，小女孩取至一张21帧的雪碧图，为了保持自适应缩放会在x轴上放大21倍，y轴保持100%的缩放，通过百分比切换x轴的坐标达到运动的效果
小女孩在逻辑上的流程有：
技术上通过样式切换图片，或者通过样式增加一个关键帧动画，实现精灵图效果，这些技术就不再重复讲解了。值的注意的是：在每一个流程动作上通过增加不同的样式实现效果，在下一个动作的时候需要删除上一个样式，否则每次增加的样式都会在一个元素上不断的叠加，会有意料之外的效果。
在pageB.js文件代码中32行填写任务代码
任务
小女孩从左边走出来，走到left=4.5rem的位置，耗时4000毫秒
注意：
1. 通过$.Deferred编写异步代码，能够让后续的动作then方法衔接得上
2.可以通transition让元素运用
3.注意动画回调的监听
4.添加小女孩走路动过的帧图切换样式girl-walk
var dfd = $.Deferred();
//小女孩走路
$girl.addClass("girl-walk");
$girl.transition({
"left": "4.5rem"
}, 4000, "linear", function() {
dfd.resolve()
})
return dfd;
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
