原生js实现抽屉动画

要使用原生JavaScript实现抽屉动画，你可以创建一个函数，该函数使用setInterval或requestAnimationFrame来逐渐改变元素的CSS属性，从而创建平滑的动画效果。

以下是一个简单的例子，演示了如何使用requestAnimationFrame来实现一个抽屉动画：

HTML:

<div id="drawer" style="width: 200px; height: 100px; background-color: blue; transition: transform 0.5s; transform: translateX(0);">
  <!-- 抽屉内容 -->
</div>
<button id="toggleButton">Toggle Drawer</button>

CSS:

#drawer {
  transform: translateX(-200px); /* 初始时抽屉在容器外 */
}

JavaScript:

const drawer = document.getElementById('drawer');
const toggleButton = document.getElementById('toggleButton');
let isOpen = false;
 
toggleButton.addEventListener('click', () => {
  isOpen = !isOpen;
  animateDrawer(isOpen);
});
 
function animateDrawer(isOpen) {
  const start = isOpen ? -200 : 0; // 抽屉的起始和结束位置
  const end = isOpen ? 0 : -200;
  const distance = end - start;
  let isAnimating = true;
 
  requestAnimationFrame(function animate(time) {
    if (!isAnimating) return;
 
    const progress = (time - lastTime) / duration; // 使用当前时间和起始时间计算进度
    const position = start + distance * easeInOutQuad(progress); // 应用缓动函数计算当前位置
    drawer.style.transform = `translateX(${position}px)`;
 
    if (progress < 1) {
      requestAnimationFrame(animate); // 如果动画未完成，继续调用requestAnimationFrame
    } else {
      isAnimating = false; // 动画完成
    }
  });
}
 
// 缓动函数，控制动画的加速和减速
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

在这个例子中，我们定义了一个animateDrawer函数，它接受一个布尔值isOpen来确定抽屉是打开还是关闭。使用requestAnimationFrame来迭代变换抽屉的transform属性，从而创建平滑的动画效果。我们还定义了一个easeInOutQuad函数来实现缓动效果，这样抽屉的打开和关闭就会有一个更自然的感觉。