<template>
  <transition name="slide">
    <div :style="{ top: boxTop, left: boxLeft }" class="car">车</div>
  </transition>
</template>

<script lang="ts" setup>
const responseData = ref({ x: 100, y: 0 });

// 计算属性，根据返回的数据动态计算子盒子的位置
const boxTop = computed(() => `${responseData.value.y}px`);
const boxLeft = computed(() => `${responseData.value.x}px`);

setInterval(() => {
  responseData.value.x += 20;
  // responseData.value.y += 5
}, 500);
</script>

<style lang="scss" scoped>
.car {
  width: 95px;
  height: 95px;
  background-color: rgba(255, 55, 255, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}
</style>
