vite vue css animationd 动画坑记录

最近在写一个页面的时候，出现了一个动画不生效的离奇bug,给我都整不自信了 想着赶早不如赶巧，今个给大伙捋捋
环境配置 系统：win11    脚手架：vite4.4   框架：vue3.3
除项目初始化包含的依赖外未引入其他依赖
起因：这天咱正在写一个组件，有这么个需求是根据父组件传递的值决定这个组件从左或者从右进入

理所当然的想到了动态绑定样式于是写了这么两个动画

<style scoped lang="less">
@keyframes slideInr {
  from{
    transform: translateX(-150%);
  }
  to{
    transform: translateX(0);
  }
}
@keyframes slideInl {
  from{
    transform: translateX(100%);
  }
  to{
    transform: translateX(0);
  }
}
</style>

然后给这个div整了个动态绑定

<div class="minaItem" :style="{animation:`${prop.rightwards?'slideInl':'slideInr'} 1s ease-in-out`
,background:`linear-gradient(${prop.rightwards?270:90}deg,#e7cdaa,transparent)`}" >
</div>

结果整上动画就没了（ps:原来我把动画加载class里是好使的） 后来咱去看一波浏览器里的标签

没毛病啊，于是乎去问问gpt4,它叫我把<style scoped lang="less">这里的scoped去掉，然而并没有什么变化，问题就这样陷入了瓶颈
但是计算机人怎么可以轻言放弃！
理性思考不行，那就暴力求解
于是乎在第n次尝试后……
我找到了问题的答案：新建一个css文件把我写在上面的动画移进去然后在mian.js引入就好，其他不用动
那么是时候思考问题的本质了，为什么这样就可以呢？
已知最后浏览器上的标签的动画属性是没有问题的，而我最后使用的是外部引入css文件的方式，众所周知外部引入的css文件是原样引入的，那么最后的真相就是vite编译的时候把我动画名称改了，有图有真相

至此真相大白结论如下：需要动态绑定的动画不要在组件中书写，建议在css文件中书写然后在mian.js中引入
当然有人要问了你为啥不动态绑定两个class呢？ 其实我是写到这里才想起来的因此总结出最佳实践是：需要动态绑定动画时把动画写在class里，然后动态绑定class就好了