17. 动画

css3 实现动画主要有 2 种方式

• transition 过渡动画
• animation 自定义动画

问题

动画不生效

问题：

一个元素自身有 transtion 属性，在一个函数里面连续设置了 2 次这个元素的变化，为什么没有触发动画？

原因：

浏览器会将同一执行上下文中的样式修改批量合并处理，只渲染了最终状态，跳过了中间状态。
而 transtion 需要检测状态变化才能触发动画，如果起始状态和结束状态在同一渲染帧中，浏览器会直接显示最终状态

解决方法：

1.用 requestAnimationFrame 把第二次修改放到下一帧

const element = document.getElementById("animated-element");
 
// 第一次修改
element.style.transform = "translateX(100px)";
 
requestAnimationFrame(() => {
  // 在下一帧执行第二次修改
  element.style.transform = "translateX(200px)";
});

2.手动强制触发回流

const element = document.getElementById("animated-element");
 
// 第一次修改
element.style.transform = "translateX(100px)";
 
// 强制布局计算（触发回流）
element.offsetWidth; // 读取布局属性
 
// 第二次修改
element.style.transform = "translateX(200px)";

3.使用宏任务把第二次修改放到下一轮事件循环

const element = document.getElementById("animated-element");
 
// 第一次修改
element.style.transform = "translateX(100px)";
 
setTimeout(() => {
  // 在宏任务队列中执行第二次修改
  element.style.transform = "translateX(200px)";
});