RequestAnimationFrame.vue

<!--
 * RequestAnimationFrame 学习
  -->
<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const element = document.getElementById(
    'some-element-you-want-to-animate'
  ) as HTMLElement;

  let translateX = 0;

  // 每秒执行30次，则执行1次需要的时间1/30(单位：秒)
  function step() {
    translateX++;
    if (translateX > 30) {
      return;
    } else {
      element.style.transform = 'translateX(' + translateX + 'px)';
      element.innerText = String(translateX);
      setTimeout(() => {
        window.requestAnimationFrame(step);
      }, (1 / 30) * 1000);
    }
  }

  window.requestAnimationFrame(step);
});
</script>
<template>
  <div>
    <div>RequestAnimationFrame</div>
    <div id="some-element-you-want-to-animate"></div>
  </div>
</template>

<style lang="scss" scoped>
#some-element-you-want-to-animate {
  width: 200px;
  height: 100px;
  background-color: pink;
}
</style>