problem description
wrote two unrelated components, but both components used animate to write animation, and then when uploaded to a private library, they were packaged with webpack. There was a project to reference these two components, and it was found that the animation of one of the components was invalid. After searching, it was determined that the name of the animation effect became the same after being packaged by webpack, and then influenced each other
.the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
component A css
@keyframes a {
0% {
background-color: -sharpfff;
}
50% {
background-color: -sharp000;
}
to {
background-color: -sharpfff;
}
}component 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
}
}what result do you expect? What is the error message actually seen?
The css of animation betweencomponents does not affect each other. I originally wanted not to package the upload component, but it might be larger if the resource was not packaged, so I gave up that idea.