为什么即使在删除类名之后，CSS动画也会继续播放？
为什么即使在删除类名之后，CSS动画也会继续播放？
提问于 2016-06-15 16:05:26
我正在尝试在我正在构建的应用程序中创建一个简单的“编辑模式”功能。当应用程序处于编辑模式时，项目需要摆动。
我添加了一个CSS动画来实现摆动效果。动画使用变换来操纵方向和位置。
@keyframes wobble {
0% { transform: translateY(2px) rotate(-2deg);}
25% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(2px) rotate(2deg); }
75% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(2px) rotate(-2deg); }
}然后使用jQuery的toggleClass函数来触发动画。
$('button').on('click', function(){
$('.items').toggleClass('editting');
})这在Chrome中工作得很好，但在Internet Explorer中，即使在类被删除之后，动画也会继续播放。
奇怪的是，多点击两次按钮就会停止IE中的动画。
请参阅jsFiddle here
以前有没有其他人经历过这种情况？
回答 1
Stack Overflow用户
发布于 2016-06-15 16:36:24
删除类名时，Internet Explorer似乎无法正确注册动画。
作为修复，我添加了一个not-editting类名来抵消editting动画。
通过添加此功能以及此CSS，我能够让Internet Explorer按预期运行。
.not-editting .item {
animation: none;
}查看此updated jsFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37840536
复制
相似问题
部分地址超出了图像区域- Intel Pin
图像平移超出容器区域
iOS使用CIFilter缩放/扭曲图像的特定部分
浮点导致图像超出对齐
使用CoreImage过滤图像会导致图像旋转
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
