Bootstrap源码分析之transition、affix
一、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样式,用于控制粘住条的定位。
转载于:https://www.cnblogs.com/cqhaibin/p/5540425.html
Bootstrap源码分析之transition、affix相关推荐
- Appium Android Bootstrap源码分析之简介
在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...
- bootstrap源码分析之Carousel
源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分 ...
- Appium基础学习之 | Bootstrap源码分析
在Appium执行日志流程分析这里已经讲解到Bootstrap的重要作用,今天就来切洋葱切一下它,看看它的真实面目: 源码地址:https://github.com/appium-boneyard/a ...
- bootstrap源码分析之form、navbar
一.表单(Form) 源码文件: _form.scss mixins/_form.scss 1.按层次结构分:form-group -> form-control/input-group/for ...
- Appium Server源码分析之作为Bootstrap客户端
Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...
- 手机自动化测试:appium源码分析之bootstrap八
手机自动化测试:appium源码分析之bootstrap八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...
- 手机自动化测试:appium源码分析之bootstrap十二
手机自动化测试:appium源码分析之bootstrap十二 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请 ...
- 手机自动化测试:appium源码分析之bootstrap七
手机自动化测试:appium源码分析之bootstrap七 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试开发 ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
最新文章
- 用sk-learn的pipline的时候,现:TypeError: ‘Pipeline‘ object is not subscriptable
- QML基础类型之var
- numpy和pandas的数据乱序
- java 程序分析题_java程序入门50题分析:002
- 显示catispecobject_CATIA CAA 二次开发 详细教程
- VS2017编译UE4.19.2报错
- 卡尔曼滤波(kalman filter)
- poj 2395 prime的递归实现
- C++ vector 内存分配与回收机制
- 【bzoj3000】Big Number 【斯特林公式】
- VMWaer克隆centos后网络的问题解决
- Jepsen mysql_Hello Clojure - Jepsen
- win10等系统安装Pads安装步骤及软件卡死问题解决
- 三星s8自带测试硬件软件,三星s8硬件测试指令 | 手游网游页游攻略大全
- TPP是也只是一种挑战
- 狂野飙车显示无法连接服务器,狂野飙车(极速版)无法连接服务器是什么原因...
- chia 免费软件快速p图 支持官方最新协议
- 企业如何构建内部开发者平台?
- 海信85U7G和海信85U7G-PRO有什么区别 哪个好详细性能配置对比
- 科技无障碍盛会举办,人工智能和创新成为高频词