Vue Directive 自定义属性

<template>
  <div class="box" v-animation>
    BOX
  </div>
</template>

<style>
@keyframes move {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(100px);
  }

  1000% {
    transform: translateX(0px);
  }
}

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animation {
  transition: 1s ease;
  animation: move 1s infinite;
}
</style>
<script setup>
const vAnimation = {
  mounted: (el) => {
    el.classList.add('animation')
  }
}
</script>

初始化之后，Box开始左右摇摆。