浏览器渲染过程
步骤
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一棵渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Composite合成(根据层叠关系展示画面)
三种更新方式
- 全部更新(JS/CSS > 样式 > 布局 > 绘制 > 合成)，比如
div.remove()会触发当前消失，其他元素relayout - 跳过layout：改变背景颜色, 直接repaint+composite
- 跳过layout和paint：改变transition, 只需composite
CSS动画的两种做法
一. TRANSITION过渡
-
作用：补充中间帧
-
语法：
- transition：属性名 | 时长 | 过渡方式 | 延迟
- 可以用all代表所有属性
- 过渡方式：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
注意: 不是所有属性都能过渡, display: none =>/<= block没办法过渡。一般改成 visibility: hidden =>/<= visible。但是background背景和opacity透明度能过渡。
二. ANIMATION
- 语法：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
- 时长：1s / 1000ms
- 过渡方式：跟transition取值相同
- 次数：3 / 2.4 / infinite
- 方向：reverse | alternate | alternate-reverse
- 填充模式：none | forwards | backwards | both
- 是否暂停： paused | running
- keyframes关键帧两种写法：
第一种：
@keyframes slidein {
from {
transform:translateX(0%);
}
to {
transform:transateX(100%);
}
}
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100px; }
}
