Javascript 触发动画的鼠标悬停问题

我最近发现/分叉了这把小提琴，并在点击时触发了动画（）。我使用它作为基线，为屏幕覆盖创建我自己的触发动画，通知用户项目已复制到剪贴板。以下是我迄今为止在这方面的进展：

$（'.copy to clipboard'）。单击（函数（）{
$target1=$（'.copy success'）；
$target1.removeClass（'copy-animation'）；
setTimeout（“$target1.addClass（'copy-animation'）；”，100）；
$target2=$（'.copy success span'）；
$target2.removeClass（'copy-animation-text'）；
setTimeout（“$target2.addClass（'copy-animation-text'）；”，100）
});
正文{
宽度：100%；
身高：100%；
位置：相对位置；
字体系列：arial；
字体大小：20px；
}
.复制成功{
显示：表格；
保证金：0；
填充：25px；
宽度：100%；
身高：100%；
文本对齐：居中；
背景#91e35fe6；
颜色：#fff；
不透明度：0；
指针事件：无；
位置：固定；
右：0；
排名：0；
}
.复制成功跨度{
显示：表格单元格；
不透明度：0；
垂直对齐：中间对齐；
}
.复制动画{
-webkit动画：轻松成功；
-moz动画：轻松成功；
-webkit动画迭代计数：1；
-moz动画迭代次数：1；
}
.复制动画文本{
-webkit动画：成功文本1.8s轻松；
-moz动画：成功文本1.8s轻松；
-webkit动画迭代计数：1；
-moz动画迭代次数：1；
-webkit动画延迟：0.1s；
-moz动画延迟：0.1s；
}
@-webkit是成功的关键{
0%{不透明度：0；}
15%{不透明度：1；}
85%{不透明度：1；}
100%{不透明度：0；}
}
@-moz是成功的关键{
0%{不透明度：0；}
15%{不透明度：1；}
85%{不透明度：1；}
100%{不透明度：0；}
}
@-webkit为成功文本设置关键帧{
0%{transform:translateY（25px）；}
15%{transform:translateY（0）；}
85%{transform:translateY（0）；}
100%{transform:translateY（-25px）；}
}
@-moz为成功文本设置关键帧{
0%{opacity:0；transform:translateY（25px）；}
15%{opacity:1；transform:translateY（0）；}
85%{不透明度：1；变换：translateY（0）；}
100%{不透明度：0；变换：translateY（-25px）；}
}
.按钮{
背景色：#ccc；
边界半径：10px；
填充：10px；
利润率：10px；
光标：指针；
显示：内联块；
字体系列：无衬线；
}
.按钮：悬停{
背景色：#eee；
}

复制到剪贴板
点击我
我无法在你的小提琴中复制你的经验

话虽如此，您是否尝试过在动画之前禁用CSS中的指针事件

pointer-events: none;

不要忘记在以下情况下重新打开：

pointer-events: all;

你所描述的都不是在这里发生的，也不是在小提琴中发生的。在Linux上尝试了Chrome和FF（都是最新的，懒得检查）。通过查看您的js代码，我猜这两个示例都是不完整的。我期待着查看炫酷的闪光灯效果，但对我来说很不幸，但对您来说很好。出于某种原因，动画在我的浏览器中运行良好。我在Mac电脑上使用过谷歌67.0.3396版和火狐61.0.1版。对我来说，在我点击按钮后，动画会在3秒钟内重置。即使我不移动鼠标也会发生这种情况你在用什么浏览器？我道歉！第二次使用堆栈，但仍然需要尽可能多地包含细节。我在firefox中遇到了这个问题（ESR 52.9.0 64位，如果有帮助的话）。我正在做的项目目前只在firefox中工作，还没有达到其他浏览器的故障排除阶段。我刚刚在chrome中打开了我的小提琴，虽然动画重置不是问题，但它要为“复制到剪贴板”文本触发的第二个动画没有显示出来。考虑到这一点，我怀疑问题在于这个演示中涉及的javascript。这很有效！遗憾的是，在回顾了前面的一些评论之后，我似乎需要对javascript进行一些调整，以便在其他浏览器中也能触发文本动画。但这是另一个我可以自己解决的问题，谢谢！