浏览器渲染过程

参考Google写的文章

• 渲染性能
• 渲染树构建、布局及绘制
• transform实现动画

步骤

• 根据HTML构建HTML树(DOM)
• 根据CSS构建CSS树(CSSOM)
• 将两棵树合并成一颗渲染树(render tree)
• Layout布局(文档流、盒模型、计算大小和位置)
• Paint绘制(把边框颜色、文字颜色、阴影等画出来)
• Compose合成(根据层叠关系展示画面)

transition

补充中间帧

transition: 属性名 时长 过渡方式 延迟

• e.g. transition: width 1s linear 1s;
• all可以指代所有属性
• 过渡方式 linear（线性匀速），ease（先快后慢），ease-in（先慢再快），ease-in-out（慢快慢）
• 时长也可以写ms
• 不是所有属性都能过渡 display:none到block无法过渡
• 让东西看不见可以用opacity:1到opacity:0过渡，只是看不见，仍在那里
• 让东西看不见更推荐用visibility:visible到visibility:hidden过渡，只是看不见，仍在那里
• display visibility区别？
• background可以过渡

过渡需要有起始 一般只有一次或两次动画，比如hover和非hover的过渡 如果还有中间点怎么办？

• 使用两次transform .a === transform ===>.b .b === transform ===>.c 用setTimeout或者监听transitionend事件判断是否到达了中间点

• 使用animation 标准写法

  • from to
  • 百分数声明关键帧

  @keyframes xxx{
    0% {
      transform: none;
    }
    100% {
      transform: translateX(20px);
    }
  }
  #demo{
    animation: xxx 5s;
  }
  

  缩写语法 animation: 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

  • 时长：1s 1000ms
  • 过渡方式：和transition取值类似
  • 次数：3 infinite
  • 方向：reverse 反向 alternate 正向加反向 alternate-reverse 反向加正向
  • 填充模式：none forwards 到最后不会返回 backwards both
  • 是否暂停：paused running