Javascript 如何阻止CSS动画干扰CSS转换转换？

让我们假设我有一个盒子，当我悬停在上面时，我想摆动它-一个细微差别的设计选择。但是当一个按钮被点击时，我希望这个框向右变换。它做到了这一点，但即使我对元素应用了

指针事件：none

，它仍然会对CSS悬停效果做出反应，告诉它抖动，这会中断通过单击按钮激活的CSS转换。我不确定为什么

指针事件：没有一个
不起作用

若要观察此问题，请在单击按钮后将鼠标悬停在移动中的框上

在变换转换过程中，如何防止抖动动画中断？


$（函数（）{
变量$box=$（'.box'）；
变量$button=$（'.button'）；
$button.on（'click'，function（）{
$box.css({
“transform”：“translateX（200px）”，
“指针事件”：“无！重要”
});
setTimeout（函数（）{
$box.css({
“transform”：“translateX（0px）”，
“指针事件”：”
});
}, 3000);
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800）；
.盒子{
背景颜色：浅灰色；
宽度：100px；
高度：100px；
变换：变换3s，背景色1s；
}
.box:悬停{
背景颜色：金色；
动画：摆动1s；
}
.按钮{
光标：指针；
字体系列：“开放式Sans”，无衬线；
边缘顶部：10px；
文本转换：大写；
填充：10px；
背景颜色：浅绿色；
宽度：100px；
高度：40px；
框大小：边框框；
文本对齐：居中；
}
@关键帧抖动{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（3deg）；
}
75% {
变换：旋转（-3deg）；
}
100% {
变换：旋转（0度）；
}
}

按钮
您可以尝试的最简单的解决方案是在js事件中添加一个类，并在悬停时添加：not（class）选择器

如果不需要javascript计算转换动作，也可以在类外进行动画转换以将其保留在css上。这使代码更干净


$（函数（）{
变量$box=$（'.box'）；
变量$button=$（'.button'）；
$button.on（'click'，function（）{
$box.css({
“transform”：“translateX（200px）”，
“指针事件”：“无！重要”
});
$box.addClass（“动画”）；
setTimeout（函数（）{
$box.css({
“transform”：“translateX（0px）”，
“指针事件”：”
});
$box.removeClass（“动画”）；
}, 3000);
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800）；
.盒子{
背景颜色：浅灰色；
宽度：100px；
高度：100px；
变换：变换3s，背景色1s；
}
.box:非（.animation）：悬停{
背景颜色：金色；
动画：摆动1s；
}
.按钮{
光标：指针；
字体系列：“开放式Sans”，无衬线；
边缘顶部：10px；
文本转换：大写；
填充：10px；
背景颜色：浅绿色；
宽度：100px；
高度：40px；
框大小：边框框；
文本对齐：居中；
}
@关键帧抖动{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（3deg）；
}
75% {
变换：旋转（-3deg）；
}
100% {
变换：旋转（0度）；
}
}

按钮
您可以在
转换
期间将元素
样式
的
动画播放状态
切换到
暂停
，在
设置超时
调用中切换到
转换后的
运行
；使用
.one（）
，
transitionend
事件将
animationPlayState
重置为
“running”
。另见


$（函数（）{
变量$box=$（“.box”）
变量$button=$（'.button'）；
$button.on（'click'，function（）{
$box.css({
“transform”：“translateX（200px）”，
“指针事件”：“无！重要”
})
//将`$box``animationPlayState`设置为`“暂停”`
[0].style.animationPlayState=“暂停”；
setTimeout（函数（）{
美元箱
.1（“过渡”，功能（e）{
//将`$box``animationPlayState`设置为`“正在运行”`
this.style.animationPlayState=“running”；
})  
.css({
“transform”：“translateX（0px）”，
“指针事件”：”
})             
}, 3000);
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800）；
.盒子{
背景颜色：浅灰色；
宽度：100px；
高度：100px；
变换：变换3s，背景色1s；
}
.box:悬停{
背景颜色：金色；
动画：向前摆动1s；
}
.按钮{
光标：指针；
字体系列：“开放式Sans”，无衬线；
边缘顶部：10px；
文本转换：大写；
填充：10px；
背景颜色：浅绿色；
宽度：100px；
高度：40px；
框大小：边框框；
文本对齐：居中；
}
@关键帧抖动{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（3deg）；
}
75% {
变换：旋转（-3deg）；
}
100% {
变换：旋转（0度）；
}
}

按钮
您可以将抖动附加到一个类，并根据需要切换该类。我不确定您是否在寻找它，但此解决方案允许箱子顺利地将滑块返回左侧。它还允许hove效果上的颜色保持工作状态


$（函数（）{
变量$box=$（'.box'）；
变量$button=$（'.button'）；
$button.on（'click'，function（）{
$box.removeClass（“摆动”）；
$box.addClass（“幻灯片”）；
setTimeout（函数（）{
$box.removeClass（“幻灯片”）；
setTimeout（函数（）{$box.addClass（“摆动”）；}，3000）；
}, 3000);
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800）；
.盒子{
背景颜色：浅灰色；
宽度：100px；
高度：100px；
转换：translateX（0px）；
变换：变换3s，背景色1s；
}
.box:hover{背景色：g