Bootstrap源码分析的transition、affix

by admin on 2018年10月3日

一、Transition(过滤)

作为一个基础支撑的零件,被别零件多次援。实现基于浏览器支持transition的力量,然后绑定动画的扫尾事件;
首先:创建一个Element;
然后:迭代查阅此元素支持的transition动画名称
Transition实现的技巧,主要是更写了jquery的event对象,代码如下:

$(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

 

次、Affix(自动生成定位)

1、Target:参数表示该一定参考节点(应该是产生滚动条之父容器对象),默认是window
2、Data-offset设置的top和bottom值,只见面用于计算表达式,不会见安装及css中
3、三种职位固定样式类:

3.1、Affix-top:到达页面顶部的时会加上的体制
3.2、Affix:在页面中的下会助长的样式
3.3、Affix-bottom:在页面底部的时节会添加的体制

4、处理公式:

1、Top:traget的轮转长条高度(scrollTop)<
元素设定离顶位置的离(offsetTop)(首潮判断)
   
1.1、scrollTop设置为:元素本身定位的top(元素即稳定离文档原点的离开)(非首糟糕)
2、getPinnedOffset:获取粘住元素top – target滚动条的top
3、bottom:如果粘住元素是首次于bottom定位的时,那么bottom就是
target滚动条高度 + target元素的冲天 >= 整个文档滚动条高度 –
粘住元素距离底部的高度
   3.1、如果是不首浅bottom定位
     
3.1.1、如果offsetTop(元素设定离顶位置的去)不也空,target的top
 + getpinnedOffset的值 > 粘住元素即定位到top的价
      3.1.2、如果offsetTop为空,target的top   + target元素的冲天
> 文档高度 – 粘住元素距离底部的万丈
4、能更改粘住元素的单纯发异的top,top值为:文档高度 — 粘住元素高度 —
粘住元素距离底部的万丈

5、坑的所于:

1、top和bottom一起行使的时候,会面世冲,原因:

   
Affix-bottom,也就是到达页面底部的当儿,bootstrap是用offset来装的top值,给元素加以了position:relative值,这即导致在返页面顶部后,再次于下滚动时候,没有任何作用
style=”color: #ff0000;”>原因:行内样式设置的relative会覆盖class中设置的fixed样式
图片 1

6、总结

1、在top情况表现出色,在bottom情况下需要好加盟手动控制
2、应用affix控件,至少要自己又写affix样式,用于控制粘住条的固化。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图