个人觉得,这部分饥人谷的课程讲的不是很全面,可能是老师的习惯,对于小白来说,这节课程真正重要的两种过渡的属性都没有介绍,只是给了个简写,给了个查找路径,了解更多,自己去查
浏览器的渲染过程
- 根据HTML生成HTML树(DOM)
- 根据CSS生成CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流,盒模型,计算大小和布局)
- point绘制(把边框颜色,文字颜色,阴影画出来)
- composite 合成(根据层叠关系展示画面)
三种树模型
简单带一下JS,如何用JS来更新模式
例
div.style.background = "red"设置属性
div.style.display="block"设置属性
div.classList.add("red");添加节点
div.remove()直接删除节点
CSS 性能优化
css性能优化
把left改成transform
使用will-change或translate
JS优化
使用requestAnimationFrame代替setTimeOut
transform全解
transform中的几个属性
translate: 移动
rotate:旋转
scale:放大/缩小
skew:倾斜
如果用transform缩写:属性间用空格隔开
transition过渡
作用:补充中间帧
- transition-property:添加过渡效果的样式属性名称
transition:left - transition-duration:过渡效果的耗时
transition:2s - transition-timing-function:设置时间函数,控制运动速度
transition-timing-function :linear - transition-delay:过渡效果的延时
transition-delay:2s
上述属性简写:transition:属性名称 过渡时间 时间函数 延迟
属性间用空格隔开
同时添加多个样式时,用逗号隔开
为所有样式添加过渡效果
transition:all 2s
animation过渡
创建动画
@keyframes xxx{
0%{
transform:translate(0,0);
}
50%{
transform:translate(200px,0);
}
100%{
transform:translate(200px,200px);
}
}
也可以用from表示0% 用to表示100%
animation的属性和transition差不多
- animation-duration:2s;
- animation-iteration-count:设置动画循环播放次数
- animation-direction:alternate来回播放
- animation-delay:2s;
- animation-fill-mode:设置动画结束时的状态
forwards保留动画结束时的状态,在有延迟时不会立即进入动画的初始状态
backwards:不会保留动画结束时的状态,再添加了动画延迟的前提下,如果动画有初始状态,先进入初始状态
both:保留动画结束状态,有延迟立即进入初始状态 - animation-timing-function:动画的时间函数
- animation-play-state:paused/running设置动画的播放状态
- animation的缩写:
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
顺序可以任意改变
用transform写的跳动的红心(jsbin)
http://js.jirengu.com/jisab/1/edit?html,css,output
用transition写的跳动的红心(jsbin)
http://js.jirengu.com/yelas/1/edit?html,css,output