本系列文章主要针对了常用的几种css布局进行需求分析与要点详解，后续将不断对布局实现方案进行补充。本文主要介绍了水平居中、垂直居中和水平+垂直居中布局方案。

1.水平居中

首先分析最简单的水平居中，基本布局如下，两个div的嵌套。需要实现的是子div相对父div水平居中。

1
2
3

<div class="parent">
    <div class="child"></div>
</div>

1.1 方案一

1
2
3
4
5
6
7
8
9
10

.parent{
    width:100px;
   height:100px;
    text-align:center;
}
.child{
    width:50px;
    height:50px;
    display:inline-block;
}

这个方案十分简单，MDN中的描述是，text-align控制行内内容如何相对它的块父元素对齐。

而将子div渲染成一个inline-block盒子可以保证它在父元素中的布局受text-align且能直接修改他的宽高属性。

优点：兼容性高，实现简单。

缺点：所有行内元素都会受text-align的影响而居中；且它是一个可继承的属性，若不想影响到更深层级的元素，需要在子元素中重新设置text-align属性。

1.2 方案二

1
2
3
4
5
6
7
8
9

.parent{
    width:100px;
   height:100px;
}
.child{
    width:50px;
    height:50px;
    margin:0 auto;
}

这个方案也很简单，当左右外边距为auto时，会自动分配父元素剩余宽度均分到左右边距中。注意：此时子元素不能是行内元素，否则margin属性是不会生效的。

优点：兼容性高，实现简单。

缺点：没有很明显的缺点，如果要说，那就是如果子元素脱离了文档流，那么margin属性会失效。

1.3 方案三（不推荐）

1
2
3
4
5
6
7
8
9
10
11
12

.parent{
    width:100px;
   height:100px;
    position:relative;
}
.child{
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

或者

1
2
3
4
5
6
7
8
9
10
11

.parent{
    width:100px;
   height:100px;
}
.child{
    width:50px;
    height:50px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
}

这个方案较前面两个更为复杂，给人一种杀鸡焉用宰牛刀的感觉。强烈不推荐使用。

优点：没有明显的优点。

缺点：较复杂，使用相对布局和绝对布局反而会留下更大的隐患；transform属性兼容性不强。

1.4 方案四（flex/grid）

1
2
3
4
5
6
7
8
9
10
11

.parent{
    width:100px;
   height:100px;
    display:flex;
    /*display:grid;*/
    justify-content:center;
}
.child{
    width:50px;
    height:50px;
}

父元素使用flex（grid）布局并设置主轴上（网格行轴）元素的排列方式为居中来实现水平居中，会带来一个问题就是主轴（网格行轴）上所有子元素都会居中。

优点：实现简单。

缺点：兼容性不强。

2.垂直居中

下面分析稍微复杂一些的垂直居中，基本布局同水平居中。需要实现的是子div相对父div垂直居中。

1
2
3

<div class="parent">
    <div class="child"></div>
</div>

2.1 方案一

1
2
3
4
5
6
7
8
9
10

.parent{
    width:100px;
   height:100px;
    display:table-cell;
    vertical-align:middle;
}
.child{
    width:50px;
    height:50px;
}

根据MDN的描述，table-cell让一个元素表现为像<td>元素一样，也就是一个单元格。然后我们使用vertical-align属性来指定单元格内元素的垂直对齐方式。（这里涨姿势了，原来vertical-align不仅能用来指定行内元素（inline）也能用来指定表格单元格（table-cell）元素的垂直对齐方式。）

优点：兼容性比较好。

缺点：为了实现垂直居中效果而把父元素变成一个单元格，从语义上来看很不友好；vertical-align属性也是具有继承性，同上text-align。

2.2 方案二

1
2
3
4
5
6
7
8
9
10
11
12

.parent{
    width:100px;
   height:100px;
    position:relative;
}
.child{
    width:50px;
    height:50px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

或者

1
2
3
4
5
6
7
8
9
10
11

.parent{
    width:100px;
   height:100px;
}
.child{
    width:50px;
    height:50px;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

类似水平居中的方案二，也是比较常见的一种实现方式。

优点：没有明显的优点。

缺点：transform兼容性不强。需要使用相对布局和绝对布局实现。

2.3 方案三 （较推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent{
    width:100px;
   height:100px;
    position:relative;
}
.child{
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
}

具体解析我打算放到水平+垂直居中的方案三中去说，这里先吊个胃口。比起方案二，方案三没有了```transform``属性，兼容性更好。

优点：兼容性好。

缺点：需要使用相对布局和绝对布局实现。

2.4 方案四（flex/grid）

1
2
3
4
5
6
7
8
9
10
11

.parent{
    width:100px;
   height:100px;
    display:flex;
    /*display:grid;*/
    align-items:center;
}
.child{
    width:50px;
    height:50px;
}

父元素使用flex（grid）布局并设置项目在其包含块中在交叉轴（块轴）上的对齐方式为居中，会带来一个问题就是交叉轴（块轴）上所有项目都会居中。

优点：实现简单。

缺点：兼容性不强。

3.水平+垂直居中

理论上，是不是把上面的水平居中和垂直居中全部排列组合一遍就可以得到NxM种方案？当然不是，这里也不浪费时间去做组合，直接给出一些可行的方案。同样，基本布局如下。需要实现的是子div相对父div水平+垂直居中。

3.1 方案一

1
2
3
4
5
6
7
8
9
10
11

.parent{
    width:100px;
   height:100px;
    display:table-cell;
    vertical-align:middle;
}
.child{
    width:50px;
    height:50px;
    margin:0 auto;
}

该方案为水平居中方案一和垂直居中方案一的组合，也同样继承了它们的缺点和优点。同样的子元素不能是行内元素。

优点：兼容性好。

缺点：语义。

3.2 方案二

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent{
    width:100px;
   height:100px;
    position:relative;
}
.child{
    width:50px;
    height:50px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

或者

1
2
3
4
5
6
7
8
9
10
11
12

.parent{
    width:100px;
   height:100px;
}
.child{
    width:50px;
    height:50px;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

该方案为水平居中方案二和垂直居中方案二的组合。

优点：能用就行。

缺点：transform兼容性不强。需要使用相对布局和绝对布局实现。

3.3 方案三（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.parent{
    width:100px;
   height:100px;
    position:relative;
}
.child{
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

这个方法并不是我原创的，而是在《CSS世界》中强烈推荐的一种方法。其核心就在于掌握格式化宽高的计算公式。

父元素的宽 = 子元素left + 子元素right + 子元素左右margin + 子元素左右border + 子元素左右padding + 子元素宽

父元素高 = 子元素top + 子元素bottom + 子元素上下margin + 子元素上下border + 子元素上下padding + 子元素高

因此，当子元素top/right/bottom/left、border、padding、宽高都确定时，margin:auto会将剩余父元素空间均分，达到居中的效果。

优点：兼容性好。

缺点：依然需要使用相对布局和绝对布局实现。

3.4 方案四（flex/grid）

1
2
3
4
5
6
7
8
9
10
11
12

.parent{
    width:100px;
   height:100px;
    display:flex;
    /*display:grid;*/
    justify-content:center;
    align-items:center;
}
.child{
    width:50px;
    height:50px;
}

这个方法综合了1.4和2.4，，会带来一个问题就是所有项目都会水平且垂直居中。

优点：实现简单。

缺点：兼容性不强。

后记

这些布局比较基础，但是依然有值得学习的思想。下文将对更加复杂也更加具有实际意义的几种布局进行分析。

前前后后看了很多关于防抖和节流的文章，一直没有编程总结。防抖和节流其实比较类似，都是闭包的简单应用。前者关键在于用户频繁进行多次操作时，只响应一次；后者关键在于控制操作的频率。下次将列举出关键函数代码与实际运用例子。

防抖

防抖关键函数

1
2
3
4
5
6
7
8
9

function debounce(f, wait) {
    let timmer = null;
    return (...args) => {
        if (timmer) clearInterval(timmer);
        timmer = setTimeout(function() {
            f(...args);
        }, wait);
    };
}

关键的两个点在于使用闭包保存timmer，以及ES6的剩余参数来传入回调函数的若干个参数。

函数调用示例

1
2
3
4

const myDebounce = debounce(myFn,1000);
for(let i=0;i<1000;i++){
    myDebounce(arg1,arg2,arg3);
}

这样，即使调用1000次，也只会响应最后一次的请求。

实战说明

该例子的应用场景主要为用户频繁点击提交按钮，可能会产生多次异步请求或同步运算，这样无论对用户还是对服务器都是不友好的。因此，我们使用防抖技术，当用户频繁点击提交时，我们只响应最后一次操作。

请在下面的输入框中随机输入文本，然后疯狂点击提交按钮，只有当你停止点击2s后，你的请求才会被提交，你会看到提交成功的提示说明。

节流

节流关键函数

1
2
3
4
5
6
7
8
9
10

function throttle(f, wait) {
    let timmer = null;
    return (...args) => {
        if (timmer) return;
        timmer = setTimeout(function() {
            f(...args);
            timmer = null;
        }, wait);
    };
}

关键技术点和节流类似，只是当timmer实例已经存在时的处理方式不同。实际上仅变动了两行代码。

函数调用示例

1
2
3
4
5
6

const myThrottle = throttle(myFn,1000);
setTimeIntervar(()=>{
    for(let i=0;i<4;i++){
    myThrottle(arg1,arg2,arg3);
}
},500);

当间隔1s调用4次myThrottle函数时，“理论上”会执行两次回调函数。（理论上指的是事件循环无法保证一定在0.5s间隔内就执行一次定时任务也无法保证每次定时任务一定会被执行。）

实战说明

当滚动进度条时，我们不需要每次滚动事件触发就进行响应，而是间隔一定时间后响应一次，这样可以在保证用户正常体验的前提下减少性能损耗。

即使疯狂对box上下滚动，可以发现它只会间隔2s响应一次。当你停止滚动时，它有可能会再响应一次。

后记

虽然防抖和节流实现起来十分简单，但是却有很重要的地位，值得不断学习与实践。

陆陆续续看过一些对js闭包(closure)，发现对闭包理解一直差点意思。直到学习了js预编译，才恍然大悟，原来从预编译出发看闭包，才能看得更加透彻!

预备知识

首先，我们得先对预编译进行一些简要地介绍。

执行上下文

执行上下文可理解为当前的执行环境，与该运行环境相对应。js引擎每进入一个环境就会创建相应的执行上下文，创建执行上下文的过程中，主要做了以下三件事件，如图：

预编译

大家都知道，javascript是解释性语言，主要特点为解释一行执行一行。
而在js的执行分为3个阶段

1. 语法分析：script标签加载即开始语法分析，分析整个标签内的语法错误。无错误即进入预编译阶段。
2. 预编译： 每进入一个新环境，就进行一次预编译，同时创建一个执行上下文并放入执行栈中。此时，当前环境会进行一定的函数声明提升和变量声明提升，注意：函数声明提升优先于变量声明提升。环境中没有新的函数声明则进入解释执行阶段。
3. 解释执行：将当前执行上下文中的VO->AO， 此后，js引擎在当前环境从上到下、从左到右执行代码，不断改变AO中的变量等内容。当前上下文执行完毕则出栈，执行下一个上下文。

要点：js进入全局环境时，主线程创建全局执行上下文，全局执行上下文中的变量对象VO(globalContext) === global,或称为GO;在进入函数环境时，会创建执行上下文，并放入执行栈，而在函数执行时执行上下文中的VO->AO

预编译四部曲：

1. 创建AO(Activation object)对象
2. 找形参和变量声明，将变量声明的名（即变量和形参名）作为AO属性名，值为undefined
3. 将实参和形参统一
4. 在函数体里面找函数声明，值赋予函数体（注意此处的函数声明要区别于函数表达式）

   预编译例子分析

   1 2 3 4 5 6 7 8 9 10 11 12

   //例题 function fn(a){ console.log(a); var a = 123; console.log(a); function a() {} console.log(a); var b = function() {}; console.log(b); function d() {} } fn(1);

5. 创建AO(Activation object)对象

   1

   AO = {}

6. 找形参和变量声明，将变量声明的名（即变量和形参名）作为AO属性名，值为undefined

   1 2 3 4

   AO = { a:undefined,//形参 b:undefined,//变量声明 }

7. 将实参和形参统一

   1 2 3 4

   AO = { a:1,//将实参值赋给形参 b:undefined,//变量声明 }

8. 在函数体里面找函数声明，值赋予函数体

   1 2 3 4 5

   AO = { a:function a(){}, b:undefined,//变量声明 d:function d(){}, }

   为了更加直观地表述这个过程，我们上述代码写成下面的等价形式

   1 2 3 4 5 6 7 8 9 10 11 12 13

   //例题 function fn(a){ function a() {} function d() {} //var a;函数声明优先于变量声明 console.log(a); a = 123; console.log(a); console.log(a); var b = function() {};//注意函数表达式不提升 console.log(b); } fn(1);

   由上述代码，我们可以很简单地分析出打印结果为：
   ƒ a() {}
   123
   123
   ƒ () {}

真正的预编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//例题：
function test(){
    console.log(b);//undefined;
    if (a) {
        var b = 100;
    }
    console.log(b);//undefined
    c = 234;
    console.log(c); //234;
}
var a;
test();
a = 10;
console.log(c);  //234;

刚进入全局环境时预编译

1
2
3
4
5

VO(globalContext) = {
    a:undefined,
    c:undefined,//非严格模式
    test:function(){...},//这里略写了函数体
}

或直接写成

1
2
3
4
5

GO = {
    a:undefined,
    c:undefined,//非严格模式
    test:function(){...},//这里略写了函数体
}

通俗来说GO比起AO只是少了实参和形参统一的步骤。
当进入函数test环境时，js预编译创建执行上下文并入执行栈，在函数执行时VO->AO。初始AO如下所示。

1
2
3

AO(test) = {
    b:undefined,
}

闭包实例分析

有了上面的预备知识，我们将举几个经典的闭包例子，从预编译出发来进行分析。

例子一

1
2
3
4
5
6
7
8
9
10
11
12

const foo = (function() {
    var v = 0
    return () => {
        return v++
    }
}())

for (let i = 0; i < 10; i++) {
    foo()
}

console.log(foo())

1. 创建全局执行上下文，此时GO对象为

   1 2

   GO = { }

2. 执行完第一条赋值语句后，此时GO对象为

   1 2 3 4 5

   GO = { foo:() => { return v++ } }

后记

如果面试官让你用一句话总结this的指向，你会怎么总结。广泛流传的一句话是:

谁调用它，this就指向谁。

严格来说，这句话的描述不够规范也不完全准确。对this指向的分析离不开执行上下文。因此，本文我们将结合执行上下文对this的各种使用场景进行分析。

全局环境下的this

例题一

1
2
3
4
5
6
7
8
9

function f1 () {
    console.log(this)
}
function f2 () {
    'use strict'
    console.log(this)
}
f1() // window
f2() // undefined

函数f1和f2都在全局环境下被调用或者说没有直接调用者，在非严格模式下this指向了调用它window对象，但在严格模式下this指向undefined。

例题二

1
2
3
4
5
6
7
8
9

const foo = {
    bar: 10,
    fn: function() {
       console.log(this)
       console.log(this.bar)
    }
}
var fn1 = foo.fn
fn1()

1
2
3
4
5
6
7
8
9
10
11
12

## 上下文对象调用中的 this
### 例题三
```javascript
const foo = {
    bar: 10,
    fn: function() {
       console.log(this)
       console.log(this.bar)
    }
}
foo.fn()

在此题中，我们先在全局环境下调用foo.fn()，而函数fn在foo对象中被调用。此时，this指向的是最后调用它的对象foo，this.bar就相当于foo.bar。

例题四

1
2
3
4
5
6
7
8
9
10

const person = {
    name: 'Lucas',
    brother: {
        name: 'Mike',
        fn: function() {
            return this.name
        }
    }
}
console.log(person.brother.fn())

由例题三的分析，此题的结果也很明了，最后调用函数fn的对象为brother，因此this.name就相当于brother.name

例题五

思考下面比较复杂的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const o1 = {
    text: 'o1',
    fn: function() {
        return this
    }
}
const o2 = {
    text: 'o2',
    fn: function() {
        return o1.fn()
    }
}
const o3 = {
    text: 'o3',
    fn: function() {
        var fn = o1.fn
        return fn()
    }
}

console.log(o1.fn())
console.log(o2.fn())
console.log(o3.fn())

调用o1.fn()时，this指向o1对象，这个没什么好说的。
调用o2.fn()时，this也指向最后调用它的o1。
调用o3.fn()时，函数fn先被赋值为函数o1.fn，然后再调用赋值后的函数fn。此时情况就还原为了例子一。

bind/call/apply 改变 this 指向

先举个简单例子

例题六

1
2
3
4
5
6
7
8
9
10

const foo = {
    name: 'lucas',
    logName: function() {
        console.log(this.name)
    }
}
const bar = {
    name: 'mike'
}
console.log(foo.logName.call(bar))

利用call改变this指向，使this指向bar对象，最后打印bar.name。

1
2
3
4
5
6
7
8
9
10

## 构造函数和 this
如下例题所示
### 例题七
```javascript
function Foo() {
    this.bar = "Lucas"
}
const instance = new Foo()
console.log(instance.bar)

显然，对于oop比较熟悉的人立马就知道这里打印的就是this.bar的值。
当new操作符调用构造函数时，会对this指向造成什么影响呢？我们简单说一下new操作符的工作就是：

1. 创建一个新对象。
2. 将构造函数的this指向这个新对象。
3. 为这个对象添加属性、方法等。
4. 最终返回新对象。

箭头函数与this

这个也是我们在使用箭头函数时要注意的问题。

例题八

1
2
3
4
5
6
7
8

const foo = {  
    fn: function () {  
        setTimeout(function() {  
            console.log(this)
        })
    }  
}  
console.log(foo.fn())

这里由于产生了闭包，this指向了window，与我们原先的想法有差异。为了能让this指向调用fn函数的foo对象，我们可以使用箭头函数来实现。

1
2
3
4
5
6
7
8

const foo = {  
    fn: function () {  
        setTimeout(() => {  
            console.log(this)
        })
    }  
} 
console.log(foo.fn())

此时，this指向最近的函数即fn的this指向。

this的优先级

对this的绑定我们通常分为两类

1. 显式绑定，如call、apply、bind、new对this的绑定。
2. 隐式绑定，如根据调用关系确定的this指向。

那么显示绑定和隐式绑定谁的优先级更高呢？

例题九

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function foo (a) {
    console.log(this.a)
}

const obj1 = {
    a: 1,
    foo: foo
}

const obj2 = {
    a: 2,
    foo: foo
}

obj1.foo.call(obj2)
obj2.foo.call(obj1)

上例比较了对象调用与call的优先级，根据打印的结果为2，1可以得知：call和apply的显式绑定的优先级要高于隐式绑定。

例题十

1
2
3
4
5
6
7
8
9

function foo (a) {
    this.a = a
}

const obj1 = {}

var bar = foo.bind(obj1)
bar(2)
console.log(obj1.a)

上例使用bind将bar函数中this绑定为obj1对象，因此执行bar(2)后，obj1.a的值为2。
此时，若将bar函数当做构造函数，new一个对象时，this将绑定到新创建的对象上。

1
2

var baz = new bar(3)
console.log(baz.a)

如上例，结果将输出3。
由此可以得到结论，同样是显示绑定new的优先级比bind高。

例题十一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function foo() {
    return a => {
        console.log(this.a)
    };
}

const obj1 = {
    a: 2
}

const obj2 = {
    a: 3
}

const bar = foo.call(obj1)
console.log(bar.call(obj2))

首先用call将this绑定到obj1，此时bar（引用箭头函数）的this也会绑定到obj1，箭头函数的绑定无法被修改。因此，最后将打印2。

后记

通过上面的例子，我们可以得知：

this的指向，是在调用函数时根据执行上下文所动态确定的。

当然，要完全解决this指向问题，光靠上面几个例子是不够的，还需要自己多写多看多做总结，才能把知识点融会贯通。

在上一篇文章4.1.2节中介绍了时钟刻度的实现方式，对其中时钟数字的摆放位置我们总结出了一套公式进行计算，本篇对数字的摆放给出了更简洁的实现方式。

改进思路

利用伪元素before，我们可以将数字附加到刻度之前，因为数字会跟着刻度旋转，所以为了保证数字正常显示，我们需要再针对数字进行一次旋转。即总共进行两次旋转，一次整体旋转，一次数字旋转。
同时，为了让刻度和数字完全对齐，我们需要在设置伪元素的样式上使用一些技巧。

代码与细节展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #clock {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid;
            font-size: 20px;
            position: relative;
        }
        
        .scale>div {
            position: absolute;
            height: 5px;
            width: 2px;
            left: 50%;
            background-color: black;
            /* 中心Y偏移=时钟高度/2 */
            transform-origin: 0 150px;
        }
        
        .scale>div:nth-child(5n+1) {
            height: 10px;
        }
        
        .scale>div:nth-child(5n+1)::before {
            /* 设置为块级元素，使其宽度可更改 */
            display: block;
            /* 文本居中显示 */
            text-align: center;
            /* 设置一个足够大的宽度，至少大于字体宽度 */
            width: 20px;
            /* 让元素向左偏移宽度的一半，使得字体与刻度线对齐 */
            margin-left: -10px;
        }
        
        .scale>div:nth-child(1)::before {
            content: '12';
            transform: rotate(0deg);
        }
        
        .scale>div:nth-child(6)::before {
            content: '1';
            transform: rotate(-30deg);
        }
    </style>
    <title>clock</title>
</head>

<body>
    <div id="clock">
        <div class="scale">
            <div class='scale0' style="transform: rotate(0deg);"></div>
            <div class='scale1' style="transform: rotate(6deg);"></div>
            <div class='scale2' style="transform: rotate(12deg);"></div>
            <div class='scale3' style="transform: rotate(18deg);"></div>
            <div class='scale4' style="transform: rotate(24deg);"></div>
            <div class='scale5' style="transform: rotate(30deg);"></div>
        </div>
    </div>
</body>

</html>

眼见为实

后记

当然，旋转两次的思路并不是只能用伪元素来实现，只是个人觉得伪元素应用于此让代码显得比较优雅。

上一篇我们简单实验了一下一些预定义的transition-timing-function关键字，实际上这些关键字同样也适用于animation-timing-function.这一篇我们就趁热打铁，配合animation来制作一个可显示时间的摆钟。

需求分析

1. 在我们实现代码前，首先得知道摆钟长啥样，其次再分析它的各个零部件是如何运动的。下面直接用图片展示吧。
   
2. 从运动规律上看，我们可以把它拆解成两部分，一部分是普通的时钟，指针按不同的频率做圆周运动；一部分是下面的单摆，做着平面单摆运动。因此，在我们实现的时候可以把它分成两部分实现，最后进行组合。

单摆的具体分析与代码实现

下面我们将对单摆进行具体分析与代码实现。

单摆的结构

静止的单摆无非就是一根线+一个球，球形盒子只需设置圆角属性

1

border-radius:50%

单摆的运动规律

单摆在最高点速度最0，在最低点速度最大，那么可以使用如下方式模拟它的运动轨迹

1

animation-timing-function:ease-in-out

单摆是一个理论上无限次地周期性运动，那么则有

1
2

animation-iteration-count:infinite;
animation-direction:alternate;

假设单摆最高摆到45度，分解它半个周期的关键帧有

1
2
3
4
5
6
7
8

@keyframes swing{
    from{
        transform:rotate(45deg);
    }
    to{
        transform:rotate(-45deg);
    }
}

已知单摆的一个周期为1s，那么综合上述代码可以得到缩写

1

animation:swing,.5s,ease-in-out,infinite,alternate

单摆绕着线的末端旋转，那么需要修改他的旋转点

1

transform-origin:center top

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div {
            margin: 0 auto;
        }
        
        @keyframes swing {
            from {
                transform: rotate(45deg);
            }
            to {
                transform: rotate(-45deg);
            }
        }
        
        #simple-pendulum {
            animation: swing .5s ease-in-out infinite alternate;
            width: 30px;
            transform-origin: center top;
        }
        
        #ball {
            height: 30px;
            width: 30px;
            background: red;
            border-radius: 100%;
        }
        
        #line {
            height: 100px;
            width: 10px;
            background: yellow;
        }
    </style>
    <title>simple-pendulum</title>
</head>

<body>
    <div id="simple-pendulum">
        <div id="line"></div>
        <div id="ball"></div>
    </div>
</body>

</html>

眼见为实

时钟的具体分析与代码实现

下面我们将对时钟进行具体分析与代码实现。

时钟的结构

1. 时钟是一个圆形容器。
2. 容器里面有时针、分针、秒针，长度为时针<分针<秒针。
3. 时钟里还有刻度和数字，每间隔6°一个小刻度，每间隔30°一个大刻度。

关键点1：时钟与指针

指针在时钟中水平垂直居中并向上偏移指针高度的50%。
水平垂直居中是一个老生常谈的问题，下面直接给出一个相对比较好且兼容性强的解决方案，实现原理是依据绝对定位的格式化宽高计算公式
计算公式粗略可表示为容器大小=top/right/bottom/left+margin+border+padding+width/height
当然有机会的话之后再写一篇文章慢慢分析水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.father{
    width:200px;
    height:200px;
    position:relative;
}
.son{
    width:10px;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

最后向上偏移指针高度的50%和指针旋转点

1
2

transform:translateY(-50%);
transform-origin:center bottom;

关键点2：时钟刻度

虽然这里用js配合jquery实现起来比较简洁，但是作为学习研究，我们要使用一切可能的方法去实现需求。
首先时钟是个圆形，我们要先把所有刻度移动到圆的顶部并居中，之后分别绕时钟中心点旋转不同的角度，当然复制粘贴的过程会有点繁琐。
对于数字，因为数字不能跟着像刻度一样旋转（旋转了以后数字朝向就变了），所以我们直接用绝对定位，并通过极坐标转直角坐标系的公式，算出偏移值。
下面将给出一个标有刻度为1的时钟的实现代码。
具体数值的计算公式已给出,此处细节处理比较多,能实现较完美的对齐效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #clock {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid;
            font-size: 20px;
            position: relative;
        }
        
        .scale>div {
            position: absolute;
            height: 5px;
            width: 2px;
            left: 50%;
            background-color: black;
            /* 中心Y偏移=时钟高度/2 */
            transform-origin: 0 150px;
        }
        
        .scale>div:nth-child(5n+1) {
            height: 10px;
        }
        
        .number>div {
            position: absolute;
            line-height: 20px;
            width: 20px;
            text-align: center;
        }
        
        .number1 {
            /* left=时钟半径+(时钟半径-刻度高度)*cos(-60°)-盒子宽度/2  */
            left: 205px;
            /* top=时钟半径+(时钟半径-刻度高度)*sin(-60°)-行高/2 */
            top: 27.41px;
        }
        
        .number12 {
            /* left=时钟半径+(时钟半径-刻度高度)*cos(270°)-盒子宽度/2  */
            left: 140px;
            /* top=时钟半径+(时钟半径-刻度高度)*sin(270°)-行高/2  */
            top: 10px;
        }
    </style>
    <title>clock</title>
</head>

<body>
    <div id="clock">
        <div class="scale">
            <div class='scale0' style="transform: rotate(0deg);"></div>
            <div class='scale1' style="transform: rotate(6deg);"></div>
            <div class='scale2' style="transform: rotate(12deg);"></div>
            <div class='scale3' style="transform: rotate(18deg);"></div>
            <div class='scale4' style="transform: rotate(24deg);"></div>
            <div class='scale5' style="transform: rotate(30deg);"></div>
        </div>
        <div class="number">
            <div class="number1">1</div>
            <div class="number12">12</div>
        </div>
    </div>
</body>

</html>

眼见为实

时钟的运动规律

时钟有三个指针，每个指针的运动频率不同。其中，时针和分针是匀速地连续地周期运动，秒针是匀速地一秒一帧地周期运动。
分针的动画粗略可以表示为

1
2
3
4
5
6
7
8
9

@keyframes rotation{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}    
animation:rotation 3600s liner infinite

秒针的动画粗略可以表示为

1
2
3
4
5
6
7
8
9

@keyframes rotation{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}    
animation:rotation 60s steps(60,end) infinite

眼见为实

因为代码比较长，冗余的地方比较多，感兴趣的请自行F12

最终实现效果

直接上图不解释(待美化)，感兴趣的请自行F12

后记

作为刚学习动画的菜鸟，css3动画有太多有趣的地方以及实现的细节与技巧。比起js动画，css3动画在实现比较简单的动画时有着较大优势，且不容易出现丢帧的情况，值得深入学习与研究。

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
其中transition-timing-function潜力最大也最为复杂，值得进行研究。

常用预定义关键字

我们所知道的常用的easing函数有：linear，ease，ease-in，ease-out，ease-in-out，以及step函数：step-start，step-end，steps(n,start)，steps(n,end)。
当然，为了得到更多的自定义easing函数，我们可以去研究贝塞尔(cubic-bezier)曲线，网上也能找到一些有趣的贝塞尔函数值。这里不多做解释，仅对预定义关键字进行演示。

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <style>
        .runner,
        .track {
            height: 80px;
        }
        
        .track {
            width: 500px;
            margin: 10px 0px;
            background: yellow;
            text-align: center;
            line-height: 80px;
            font-size: 20px;
        }
        
        .runner,
        .track:hover>.runner {
            transition: transform 1s;
        }
        
        .runner {
            width: 100px;
            border: solid;
            line-height: 80px;
            position: absolute;
        }
        
        .track:hover>.runner {
            transform: translate(400px);
        }
        
        .track>.linear,
        .track:hover>.linear {
            transition-timing-function: linear
        }
        
        .track>.ease-in,
        .track:hover>.ease-in {
            transition-timing-function: ease-in
        }
        
        .track>.ease-out,
        .track:hover>.ease-out {
            transition-timing-function: ease-out
        }
        
        .track>.ease-in-out,
        .track:hover>.ease-in-out {
            transition-timing-function: ease-in-out;
        }
        
        .track>.steps-start,
        .track:hover>.steps-start {
            transition-timing-function: steps(5, start);
        }
        
        .track>.steps-end,
        .track:hover>.steps-end {
            transition-timing-function: steps(5, end);
        }
    </style>
</head>

<body>
    <div class="track-container">
        <div class="track">
            <div class="runner linear"></div>
            linear赛道，匀速
        </div>
        <div class="track">
            <div class="runner ease"></div>
            ease赛道：默认值，起步快，减速
        </div>
        <div class="track">
            <div class="runner ease-in"></div>
            ease-in赛道：加速
        </div>
        <div class="track">
            <div class="runner ease-out"></div>
            ease-out赛道：减速
        </div>
        <div class="track">
            <div class="runner ease-in-out"></div>
            ease-in-out赛道：先加速后减速
        </div>
        <div class="track">
            <div class="runner steps-start"></div>
            steps(5,start)赛道：20% 40% 60% 80% 100%
        </div>
        <div class="track">
            <div class="runner steps-end"></div>
            steps(5,end)赛道：0 20% 40% 60% 80%
        </div>
    </div>
</body>

</html>

眼见为实

把鼠标悬停到赛道上，看每个runner奔跑吧。

小tips

此处布局也使用了无依赖绝对定位技巧，不了解的可以看上一篇哦！

后记

通过transition-timing-function我们可以得到很多运动轨迹，如何把这些有着不同特点的运动轨迹应用于实际，需要我们不停地实践与积累。

聊起absolute定位，我们首先想到的就是找其包含块(containing block)或直接给父元素一个relative定位,然后根据包含块通过设置top,right,bottom,left属性值进行偏移。看起来，这是很常见的做法，但盲目的如此”套公式“，只能说你对absolute的理解不到家。

何所谓“依赖”

所谓“依赖”，指的是绝对定位元素需要找到包含块，然后”依赖“包含块进行偏移或格式化元素的宽高。

为了达到我们的目的——让子元素紧紧地“依赖”父元素，我们会“丧心病狂”的硬塞给父元素一个relative定位，甚至配合z-index属性设置层级。

好吧，先不谈父元素愿意不愿意，既然谈到了“依赖”，就不得不联想到耦合，耦合度越高的代码在应对变化时就越脆弱。

传统的“有依赖”绝对定位

既然要聊聊无依赖绝对定位，那么就应该先看看传统的”有依赖”绝对定位在一些经典应用场景是怎么做的，然后我们再谈怎么改进。

表单提示信息

1. 场景重现：填写表单时，当某个输入框获取焦点时，在输入框右侧显示一些提示信息。

2. 场景分析：

   1. 提示信息为不定长，若父元素宽度表现为定长，那么有可能内容会溢出；若父元素宽度表现为包裹性，那么宽度就会改变。
   2. 提示信息的显示和隐藏不能影响原布局，那么使其脱离文档流是最常见的选择。

3. 代码实现：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo1</title> <style> .regist-box { width: 300px; /* 容器定宽 */ margin: 0 auto; /* 为了便于观察给一个边框 */ border: 1px solid; /* 使其变成子元素的包含块 */ position: relative; } input { width: 200px; } /* 提示信息 */ .regist-remark { color: red; display: none; /* 绝对定位 */ position: absolute; /* 根据包含块进行定位 */ top: 0; left: 250px; white-space: nowrap; } /* 输入框获得焦点显示提示信息 */ input:focus~.regist-remark { display: inline; } </style> </head> <body> <div class='regist-box'> <div class="regist-group"> <label class="regist-label">邮箱</label> <input type="email" class="regist-input"> <span class="regist-remark">请输入邮箱！</span> </div> </div> </body> </html>

4. 眼见为实：

5. 代码分析：
   让我们来分析一下，这样的代码是如何的脆弱。改动输入框width/padding/margin或改动label的文字长度，都需要修改提示信息的偏移值。那么他的复用性就大大降低了，特别是应对动态生成元素时，需要借助js进行偏移计算。

无依赖的改造

1. 直接进入正题，对于上述应用场景的代码进行改造。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo2</title> <style> .regist-box { width: 300px; /* 容器定宽 */ margin: 0 auto; /* 为了便于观察给一个边框 */ border: 1px solid; /* 使其变成子元素的包含块 */ /* position: relative; */ } input { width: 200px; } /* 提示信息 */ .regist-remark { color: red; display: none; /* 绝对定位 */ position: absolute; /* 根据包含块进行定位 */ /*top: 0; left: 250px; white-space: nowrap;*/ /* 利用margin进行偏移 */ margin-left: 10px; } /* 输入框获得焦点显示提示信息 */ input:focus~.regist-remark { display: inline; } </style> </head> <body> <div class='regist-box'> <div class="regist-group"> <label class="regist-label">邮箱</label> <input type="email" class="regist-input"> <span class="regist-remark">请输入邮箱！</span> </div> </div> </body> </html>

2. 眼见为实

3. 代码分析：
   毫不犹豫的去掉硬塞给父元素的相对定位，同时也去掉了left/right，使用margin进行元素偏移。
   代码中使用margin-left:10px从视觉上看就是相对于输入框向右偏移了10px，虽然实际上其脱离了文档流，但是margin的表现却如它还在文档流中一样。
   如此一来，没有了“依赖”，其弹性大大提高。无论你label有多少文字、input有多宽，我都永远乖乖跟在你身后，不离不弃。

4. 小tip:
   想让提示信息放到输入框前面只需要改动它们在文档中的排列顺序哦！这个可以自行尝试。

   其他应用

   下面将给出它的其他简单有趣应用。

   悬停展示下拉列表

5. 代码实现：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo3</title> <style> .item { display: inline-block } .item, .combo_box { padding: 10px; border: 1px solid; width: 100px; } .combo_box { position: absolute; /* margin-left = -1 * (padding-left + border-left) */ margin-left: -11px; /* margin-top = padding-bottom + border-bottom */ margin-top: 11px; border-top: none; display: none; } .item:hover>.combo_box { display: block; } </style> </head> <body> <div class='box'> <div class="item"> <a>linka11111</a> <div class="combo_box"> <div class="subItem"> <a>linka111</a> </div> </div> </div> <div class="item"> <a>linkb</a> <div class="combo_box"> <div class="subItem"> <a>linkb1</a> </div> <div class="subItem"> <a>linkb2</a> </div> </div> </div> <div class="item"> <a>linkc</a> </div> </div> </body> </html>

6. 眼见为实：

7. 代码分析：
   如此布局，可以满足一些简单的下拉框需求，仅当item的padding/border改变时需要对margin进行修改，而修改item内文字长度、大小都不会影响布局。

后记

无依赖absolute绝对定位的舞台很大，我们可以思考曾经使用absolute实现的功能是否都能利用它来替换，使代码更简洁更健壮。