H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【CSS】组件的动画效果相互影响

问题描述

写了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相互不影响,本来想不打包上传组件,但是如果不打包资源可能会比较大,所以放弃了那种想法。

回答:

换一个命名不就行了

本文地址:H5W3 » 【CSS】组件的动画效果相互影响

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址