移动div

方案一

image.png
间隔函数：setInterval(函数，间隔时间)
箭头函数：()=>{ do something }

方案二

image.png
延时函数：setTimeout(函数，间隔时间)

调出rendering(渲染)

image.png

浏览器渲染原理

渲染步骤

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

用JS更新样式

  • div.style.background = ‘red’
  • div.style.background = ‘none’
  • div.classList.add(‘red’) // 推荐
  • div.remove() // 删掉节点

三种渲染更新方式

image.png

  1. div.remove()触发当前消失，其他元素relayout，全走
  2. 改变背景色，跳过layout
  3. 改变transform, 跳过layout和paint

查询网站：https://csstriggers.com/

CSS动画优化

  • JS: 使用requestAnimationFram代替setTimeout或setInterval
  • CSS: 使用will-change或translate

transform

translate 位移

  1. transform: translateX(100px);
  2. transform: translateY(100px);
  4. transform: translateZ(100px);
  5. /* Z轴位移要配合父元素上加上perspective透视点 */
  6. .wrapper{perspective: 100px}  /* 透视点在父元素中心距屏幕向内100px */
  8. /* 简写 */
  9. transform: translate(100px, 100px);
  10. transform: translate3d(100px, 100px, 100px);  /* x, y, z */
  12. /* 也可用百分数，表示自身宽度/高度的百分比 */
  13. transform: translate(50%, 60%);

transform: translate(-50%, -50%)用于居中定位

  1. #demo {
  2.   border: 1px solid red;
  3.   width: 100px;
  4.   height: 100px;
  5.   position: absolute;
  6.   left: 50%;
  7.   top: 50%;
  8.   transform: translate(-50%, -50%)
  9. }
  11. .wrapper {
  12.   border: 1px solid blue;
  13.   height: 500px;
  14.   position: relative;
  15. }

scale 缩放

  1. transform: scale(1.2); /* 放大 */
  2. transform: scaleX(1.2);
  3. transform: scaleY(1.2);

rotate 旋转

  1. transform: rotate(45deg); /* 默认绕Z轴 */
  2. transform: rotateX(45deg); /* 绕X轴 */
  3. transform: rotateY(45deg);

skew 变形

  1. transform: skew(45deg);

综合使用

  1. transform: translate(50%) skew(45deg) rotate(30deg);

制作红心

demo1: http://js.jirengu.com/nosic/2/edit?html,css,output
demo2: http://js.jirengu.com/namuh/5/edit?html,css,output

transition 过渡

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

  1. transition: width 1s linear 100ms;  /* linear 匀速 ease 先快后慢 */
  2. transition: all 1s;

display:none到block不能过渡
visibility:hidden; 到 visibility: visible; 可以
opacity透明度不推荐

animation

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

step1：设置关键帧@keyframes

  1. /* 方法一 */
  2. @keyframes xxx {
  3.   0% {
  4.     transform: scale(1.0);
  5.   }
  6.   100% {
  7.     transform: scale(1.5);
  8.   }
  9. }
  11. /* 方法二 */
  12. @keyframes xxx {
  13.   from {
  14.     transform: margin-left: -20%;
  15.   }
  16.   to {
  17.     transform: margin-left: 100%;
  18.   }
  19. }

step2: 添加animation

  1. .className {
  2.   animation: xxx 800ms infinite alternate forwards;
  3. }