章节
问答
课签
笔记
评论
占位
占位

开门关门效果的实现

JavasSript代码的编写是根据HTML结构来的,合理的HTML结构布局,可以让代码更少更简单

先看看门的布局

<div class="door">
    <div class="door-left"></div>
    <div class="door-right"></div>
</div>

通过一个父容器定位,左右门可以采用left处理分别是0%与50%,这样我们在通过JS控制时候只需要改变left就可以形成开关门的效果

开门关门的效果比较简单,用之前3-3节用过的transition插件可以实现

在实现的时候还需要注意几个问题

  • 开关门是2组动画,需要2组transition的实现
  • 开关门是否完成,是需要监听2个动画是否完成才可以
  • 为了支持线性编程的逻辑,需要通过Deferred改善代码

开门的left的坐标是往反向变化,所以变化的值是:

  • 左边0%到-50%  
  • 右边50%到100%

关门的left还原到0%与50%即可。

在监听动画完成上,采用用了一个count计数,count开始为2,当执行第一个回调后会减1,只有当二个回调执行的时候,这个defer.resolve才会执行

var complete = function() {
    if (count == 1) {
        defer.resolve();
        return;
    }
    count--
}

在代码封装部分,把开关门的动画调用接口分开,但是相同的部分合并成doorAction最终的处理方法,并合并了Deferred的处理,这样可以让开关门的这个动作可以很好融入到跟整体的流程中

任务

打开index.html文件,在代码的97行填入相应代码,可以观察到右边开关门的变化

doorRight.transition({
    'left': right
}, time, complete);
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?