Vue3这一个弹幕从下往上显示数据的页面，需要用到虚拟化技术，超过200条数据自动删除，用css3技术，让弹幕显示出来很丝滑

以下是一个使用Vue3和CSS3实现弹幕从下往上显示的页面，并使用虚拟化技术和自动删除优化性能的示例代码：

<template>
  <div class="danmu-container">
    <teleport to="#danmu-layer">
      <div class="danmu-box" v-for="(danmu, index) in visibleList" :key="danmu.id" :style="{ bottom: (index * lineHeight) + 'px', animationDelay: (index * 0.2) + 's' }">{{ danmu.text }}</div>
    </teleport>
  </div>

  <div id="danmu-layer"></div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'Danmu',

  setup() {
    const lineHeight = 60; // 弹幕行高
    const danmuHeight = 40; // 弹幕高度
    const danmuSpeed = 2; // 弹幕速度，每秒移动的像素数
    const visibleCount = 10; // 可见弹幕数量
    const danmuList = ref([]); // 弹幕列表
    const visibleList = ref([...danmuList.value].slice(0, visibleCount)); // 可见弹幕列表
    let timer = null; // 定时器

    // 添加弹幕
    function addDanmu(danmu) {
      danmuList.value.push(danmu);
      if (danmuList.value.length > 200) {
        danmuList.value.splice(0