VUE使用animation的重名问题

最新推荐文章于 2025-05-29 10:17:05 发布

imcmuc

最新推荐文章于 2025-05-29 10:17:05 发布

阅读量178

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_38206656/article/details/133746084

版权

文章讨论了Vue中使用Scoped样式时，Webpack打包后选择器添加标识符以避免冲突。然而，当配合animation和keyframes时，由于keyframes不被视为选择器，可能导致名称冲突。解决方法是规范keyframes命名格式为animation-[路径]-[文件名]-[名称]。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue在使用样式时如果是scoped的方式，在使用webpack打包后的选择器后面会增加[data-v-xxxx]的标记以区分不同组件之间选择器重名的引用关系。

但是使用animation配合keyframes，animation-name没有被认为是选择器，@keyframes animation-name后也未添加额外标识，使重名keyframes相互冲突影响，解决方法为将 animation-name 的命名格式规定为 animation-[path]-[file-name]-[name]。

暂时未想到其他方法。