瀏覽器渲染原理
- 根據(jù)HTML構(gòu)建HTML樹(DOM)
- 根據(jù)CSS構(gòu)建CSS(CSSOM)
- 將兩棵樹合并成一顆渲染樹(render tree)
- Layout布局(文檔流壹堰，盒模型，計算大小和位置)
- Paint繪制（把邊框顏色晶乔，文字顏色，陰影等畫出來）
-
Compose合成（根據(jù)層疊關(guān)系展示畫面）
渲染.jpg
不同的屬性坏平，渲染流程不同
- 全走一遍
div.remove() 會觸發(fā)當(dāng)前消失逛钻，其他元素重新布局，再繪制合成 - 跳過layout
改變背景顏色逼侦，不需要再布局，直接繪制合成 -
跳過layout腰耙、paint
改變transform榛丢，只需重新合成
三種更新方式.jpg
CSS 動畫的兩種做法（transition 和 animation）
動畫原理
- 定義
由許多靜止的畫面（幀），以一定的速度（如每秒30張）連續(xù)播放時挺庞，肉眼因視覺殘像產(chǎn)生錯覺晰赞，而誤以為是活動的畫面。 - 概念
幀：每個靜止的畫面都叫做幀
播放速度：每秒24幀（影視）或者每秒30幀（游戲）
transform
- 四個常用功能
- translate 位移
translateX(50%)，translateY(50%)宾肺，translate(50%,50%)溯饵，translateZ(50%)且父容器perspective，translate3d(x,y,z) - scale 縮放
scaleX(0.5)锨用，scaleY(0.5)丰刊，scale(0.5, 0.5) - rotate 旋轉(zhuǎn)，一般用于360度旋轉(zhuǎn)制作loading增拥。
- skew 傾斜
2.經(jīng)驗
- 一般都需要配合
transition過渡 -
inline元素不支持transform啄巧，需要先變成block - 組合使用
transform: scale(0.5) translate(-100%,-100%) -
transform:none;取消所有 -
translate(50%,50%)可做絕對定位元素的居中 -
scale容易出現(xiàn)模糊
transition 過渡
- 作用
補充中間幀 - 語法
- transition:屬性名 時長 過渡方式 延遲（
transitio:left 1s linear） - 可以用逗號分隔兩個不同屬性（
transition:left 1s，top 2s） - 可以用all代表所有屬性（
transition:all 1s） - 過渡方式有：
linear/ease（默認(rèn)的）/ease-in/ease-out/ease-in-out…… - 注意：并不是所有屬性都能過渡
display:none =>block無法過渡掌栅，一般改成visibility:hidden =>visible
background無法過渡秩仆，opacity透明度無法過渡 - 過渡必須要有起始，一般只有一次動畫或者兩次
- 除了起始猾封，還有中間點澄耍，怎么辦？
- 使用兩次transform
.a === transform ===>.b
.b === transform ===>.c
用setTimeout或者監(jiān)聽transitionend事件知道到中間點了 - 使用animation晌缘，聲明關(guān)鍵幀齐莲，添加動畫
animation 動畫
- 當(dāng)有中間點時可以使用animation，需聲明關(guān)鍵幀@keyframes磷箕，添加動畫
@keyframes兩種寫法
一種是from to
@keyframes slidein{
from{
transform: translateX(0%);
}
to{
transform: translateX(100%);
}
}
一種是百分?jǐn)?shù)
@keyframes identifier{
0%{top: 0; left: 0;}
30%{top: 50px;}
68%, 72%{left: 50px;}
100%{top: 100px; left: 100%;}
}
- 語法
animation: .5s heart infinite alternate-reverse;
- animation：時長 過渡方式 延遲 次數(shù) 方向 填充模式 是否暫停 動畫名
- 時長：1s或1000ms
- 過渡方式：跟transition取值一樣
- 次數(shù)：3或2.4或infinite（無窮盡）
- 方向：reverse（相反）/alternate（輪流）/alternate-reverse（交替反轉(zhuǎn)）
- 填充模式：none/forwards/backwards/both
- 是否暫停：paused/running
3.提問：如何讓動畫停留在最后一幀
- 搜索css animation stop at end
- 在animation后加一個forwards
