组件的动画效果相互影响

Question

问题描述

写了2个相互无关的组件，但是2个组件都使用了animate写动画，然后上传到私库的时候用webpack打包了，有个项目要引用这2个组件，结果发现其中一个组件的动画无效了，经过查找确定是因为经过webpack打包，动画效果的名称都变成相同了，然后相互有影响了

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
组件A css

@keyframes a {
  0% {    background-color: #fff;
  }
  50% {    background-color: #000;
  }  to {    background-color: #fff;
  }
}

组件B

@keyframes a {
  0% {    stroke-dasharray: 1, 200;    stroke-dashoffset: 0
  }

  50% {    stroke-dasharray: 90, 150;    stroke-dashoffset: -40
  }  to {    stroke-dasharray: 90, 150;    stroke-dashoffset: -120
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

组件之间动画的css相互不影响，本来想不打包上传组件，但是如果不打包资源可能会比较大，所以放弃了那种想法。

Answer 1

换一个命名不就行了