vue3 style绑定动画

在Vue3中，如果你想要给组件添加动态的CSS动画效果，可以利用`v-bind:class`或者`:style`指令结合`@keyframes`来实现。下面是一个简单的例子：

<template>
  <div :style="{ animation: 'myAnimation 2s ease infinite' }">
    这里是动画内容
  </div>
</template>

<style scoped>
@keyframes myAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

// 或者使用 class
<div v-bind:class="{ animated: showAnimation }">
  动画内容
</div>

<style scoped>
.animated {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
</style>

在这个例子中，`:style`属性绑定了一个包含动画名称、持续时间和播放模式的对象。`@keyframes`则定义了动画的关键帧变化。而在`v-bind:class`的例子中，我们创建了一个名为`animated`的CSS类，当`showAnimation`标志为真时，这个类会被应用到元素上，触发动画。