12_css3动画、js动画、js获取元素样式

动画处理

总原则：能用css3解决的动画，优先使用css3，因为他的性能体验最好，解决不了的再基于js实现，如果js也解决不了，很早之前是基于flash处理，现在直接换需求，不然就换个产品经理

Css3动画

有一个动画库：https://animate.style/
transform是变形属性，不是动画

• transition 过渡动画
  步骤：设置过渡效果，当改变元素样式的时候会按照过渡效果进行运动
  特点：不关注运动的轨迹，
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: linear;
  transition-delay: 0s;
  transition：[property] [duration] [timing-function] [delay];
  JS中可以监听transition的过程，有ontransitionstart、ontransitionrun、ontransitionend事件，有几个属性更改就会触发几次

• animation 帧动画
  步骤：基于@keyframes设置运动的轨迹{0%[form]~100%[to]},最后基于animation按照指定的轨迹进行运动
  animation-name: AAA;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards/backwards/both;
  animation-play-state: paused/running;
  animation也有对应的可以监听的事件过程：onanimationstart、onanimationiteration、onanimationend，不一样的是一个animation只会触发一次事件，

动画方案选取的规则：
- 简单动画优先使用transition、复杂动画使用animation，但是运动轨迹或者样式是动态管理的，使用transition

定时器处理

定时器返回的值：数字，代表当天设置的定时器，是系统中的第几个定时器。

定时器有4个

1. setTimeout([callback],[interval])——到达时间后只执行一次，定时器就结束，后续不再触发执行，但并不代表定时器被清除

2. setInterval([callback],[interval])——轮询定时器，每隔一段时间就触发一次，直到手动清除定时器

• clearTimeout/clearInterval 清除定时器，传递一个数字，移除该编号的定时器，都可以移除两种定时器

3. requestAnimationFrame 类似于setTimeout定时器，只不过不需要指定时间因子，他会自动按照电脑的刷新率时间进行处理——>等待每次屏幕刷新的时候，把指定的回调函数执行

requestAnimationFrame(()=>{})

获取元素的样式

• 元素.style.xxx 只能获取写在元素行内的样式（不常用，很好在行内上写样式）
• window.getComputedStyle(元素,伪类) 获取元素/伪元素所有经过浏览器计算过的样式——只要元素被浏览器渲染了，那么其所有样式都是经过计算的，即便不写样式，浏览器也会为元素设置默认样式
• …

设置元素样式的方法

• 元素.style.xxx =xx 把样式设置在行内上（优先级很高）
• 元素.className = ‘xxx’
  元素.classList.add/remove(‘xxx’) 在样式表中先把样式写好，在js中基于操作样式类名，来管理样式
• 元素.style.cssText = xxx:xxx;