一、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值,这就导致在回到页面顶部后,再次向下滚动时候,没有任何效果
原因:行内样式设置的relative会覆盖class中设置的fixed样式

6、总结

1、在top情况表现良好,在bottom情况下需要自己加入手动控制
2、应用affix控件,至少要自己重写affix样式,用于控制粘住条的定位。

Bootstrap源码分析之transition、affix的更多相关文章

  1. Appium Android Bootstrap源码分析之启动运行

    通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...

  2. Appium Android Bootstrap源码分析之命令解析执行

    通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...

  3. Appium Android Bootstrap源码分析之控件AndroidElement

    通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...

  4. Bootstrap源码分析系列之初始化和依赖项

    在上一节中我们介绍了Bootstrap整体架构,本节我们将介绍Bootstrap框架第二部分初始化及依赖项,这部分内容位于源码的第8~885行,打开源码这部分内容似乎也不是很难理解.但是请站在一个开发 ...

  5. Bootstrap源码分析系列之整体架构

    作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...

  6. BOOtstrap源码分析之 tooltip、popover

    一.tooltip(提示框) 源码文件: Tooltip.jsTooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.wid ...

  7. Bootstrap源码分析之dropdown

    源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...

  8. Appium Android Bootstrap源码分析之简介

    在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...

  9. bootstrap源码分析之Carousel

    源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1. ...

随机推荐

  1. Topology Shapes of OpenCascade BRep

    Topology Shapes of OpenCascade BRep eryar@163.com 摘要Abstract:通过对OpenCascade中的BRep数据的读写,理解边界表示法的概念及实现 ...

  2. HTML5第一讲

    第一回合:什么是HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTM ...

  3. 写在MongoCola在Github上获得200个Star之后

    MongoCola MongoCola是一个开源的MongoDB管理工具. 由于最初版本的设计失误,所以现在只能在Windows上使用,虽然可以在OSX上使用,但是非常别扭. 契机 MongoCola ...

  4. 聚合索引(clustered index) / 非聚合索引(nonclustered index)

    以下我面试经常问的2道题..尤其针对觉得自己SQL SERVER 还不错的同志.. 呵呵 很难有人答得好.. 各位在我收集每个人擅长的东西时,大部分都把SQL SERVER 标为Expert,看看是否 ...

  5. angularjs中 *.min.js.map 404的问题

    初次使用AngularJS,在chrom调试的时候,出现如下问题: GET http://localhost:63342/luosuo/visitor/js/lib/angular-animate.m ...

  6. 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR

    接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...

  7. 开源服务专题之--------mysql的编译安装

    为什么选择MySQL 1:mysql性能卓越,服务稳定,很少出现异常宕机 2:mysql开源免费,无版权制约,自主性及使用成本低 3:产品耦合度,mysql支持多种操作系统,支持多开发语言,特别是ph ...

  8. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  9. WPF系列:样式

    一般简单的样式我们可以直接写在控件中 <Button Canvas.Left="20" Canvas.Top="30" Width="100&q ...

  10. Rebalance Customer Balances Utility的使用

    用户不管是打开A/R Posted Transactions Detail还是A/R Posted Transactions Summary 窗口,均显示如下一个警示: 打开Currency Code ...