<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
let timerId = -1;
let state = reactive({
  foreColor: "#FF0000",
  backColor: "#00FF00",
  width:65,
  transX: 0,
  transY: 0,
});
onMounted(() => {
  timerId = setInterval(() => {
    if (state.foreColor == "#00FF00") {
      state.foreColor = "#FF0000";
      state.backColor = "#00FF00";
      state.width = 65;
      state.transX = 50;
      state.transY = 0;
    } else {
      state.foreColor = "#00FF00";
      state.backColor = "#FF0000";
      state.width = 55;
      state.transX = 0;
      state.transY = 50;
    }
  }, 3000);
});
onBeforeUnmount(() => {
  {
    if (timerId >= 0) {
      clearInterval(timerId);
    }
    timerId = -1;
  }
});
</script>

<template>
  <div class="block-var">CSS class中包含变量</div>

  <div class="block-kf-var">CSS keyframes中包含变量</div>

</template>

<style scoped>
.block-var {
  width: v-bind('state.width + 10');
  height: 65;
  color: v-bind('state.foreColor');
  background-color: v-bind('state.backColor');
}

.block-kf-var {
  left: 100;
  width: 65;
  height: 65;
  color: v-bind('state.foreColor');
  background-color: v-bind('state.backColor');
  animation: AnimTranslate 2s linear infinite;
}

@keyframes AnimTranslate {
  from {
    transform: translate3d(0, v-bind('state.transY'), 0);
  }
  to {
    transform: translate3d(v-bind('state.transX'), 0, 0);
  }
}

</style>