1.浏览器渲染原理
1.1 步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSDOM）
- 将两棵树合并成一棵渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
2.1 三种更新方式
- JS/CSS—样式——布局——绘制——合成
- JS/CSS—样式——绘制——合成（没有改变元素位置大小等，只更改背景颜色等，不需要再次计算布局）
- JS/CSS—样式——合成（没有改颜色，也没有改位置大小等，不需要再次绘制和布局）
2.CSS 动画（transition 、tranform和animation）
2.1 transition过渡
2.1.1 定义
允许CSS值在一定的时间内平滑的过渡，需要事件（单击/获取焦点/失去焦点等）的触发，用于补充中间帧
2.1.2 语法
- transition：属性名 时长 过渡方式 延迟
transition:property duration | timing-function | delay
//实例
transition:left 200ms liner
- 可以用逗号分隔两个不同属性
transition:left 200ms,top 400ms
- 可以用all代表所有属性
transition:all 200ms
-
过渡方式
linear匀速过渡
ease开始和结束时缓慢
ease-in开始时缓慢
ease-out结束时缓慢
ease-in-out类似于ease，但幅度相较而言比较大
cubic-bezier在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start直接位于结束处
step-end位于开始处经过时间间隔后结束
2.1.3 注意事项
- 并不是所有属性都可以过渡，例如
display:none => blcok，需通过改成visibiity:hidden => visible解决 - 对于可以找到过渡规律的属性（例如background，opacity等），均可使用transition属性过渡
- 过渡必须要有起始
2.2 tranform转换
2.2.1 用途
- 向元素应用2d或3d转换，对元素进行运动移动、缩放、转动、拉长或拉伸
- 使用方法
transform: none|transform-functions;
2.2.2 属性
transform:none：定义不进行转换
transform:translate(x,y)：定义2d移动转换，x数值为横向移动转换，y数值为纵向移动转换
transform:scale(x,y)：定义2d缩放转换，x数值为横向缩放转换，y数值为纵向缩放转换
transform:rorate(旋转角度)：
.itemName {
//顺时针旋转45°，负值为逆时针旋转
transform: rotate(45deg)
}
- transform:skew(x-angle,y-angle/角度)：定义沿着x轴和y轴的2d倾斜转换
//倾斜20°
.itemName {
transform: skew(20deg)
}
- perspective(n):为 3D 转换元素定义透视视图。
*更多属性参考：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function
W3C：https://www.w3school.com.cn/cssref/pr_transform.asp
2.3 animation动画
2.3.1 用途及使用方法
- 用于制作关键帧动画
- 使用方法：将属性写进需要动画的元素对应的css中，格式如下（按需添加对应属性即可）
- animaition：名称 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
animation: name duration | timing-function | delay | iteration-count | direction | animation-fill-mode | animation-play-state
2.3.2 属性
- animation-name：规定需要绑定到选择器的keyframe名称
//ItemChange是自定义的名字，也是animation中name的值
@keyframes ItemChange {
0% {
width:50px;
}
50% {
width:100px;
}
100% {
width:150px;
}
}
animation-duration：规定动画所花费的时间（持续的时间），以秒或毫秒计算
animation-timing-function：用于定义函数变化速度曲线，即过渡方式
linear动画从头到尾速度相同，即线性过渡
ease默认值，动画低速开始，随后加速，在结束前变慢
ease-in动画低速开始
ease-out动画低速结束
ease-in-out动画低速开始和结束
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。animation-delay：规定动画开始之前的延迟，以秒或毫秒计算
animation-iteration-count：表示动画的播放次数
n定义动画播放次数
infinite规定动画应该无限次播放animation-derection：规定是否反向轮流播放动画，即动画的播放方向
normal：默认值，规定动画应该正常播放
reverse：动画直接跳至结束，从结束处开始轮流播放
alternate：规定动画应该轮流反向播放
alternate-reverse：动画直接跳至结束，再从结束处开始往复交替轮流播放animation-fill-mode：规定了动画的填充模式
none：默认值，不改变默认行为
forwards：当动画完成后，保持最后一个属性值，定义在最后一个关键帧里
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。animation-play-state：规定动画是否暂停
paused：规定动画已暂停
running：规定动画正在播放
