首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么即使在删除类名之后,CSS动画也会继续播放?

为什么即使在删除类名之后,CSS动画也会继续播放?
EN

Stack Overflow用户
提问于 2016-06-16 00:05:26
回答 1查看 184关注 0票数 0

我正在尝试在我正在构建的应用程序中创建一个简单的“编辑模式”功能。当应用程序处于编辑模式时,项目需要摆动。

我添加了一个CSS动画来实现摆动效果。动画使用变换来操纵方向和位置。

代码语言:javascript
运行
复制
@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函数来触发动画。

代码语言:javascript
运行
复制
$('button').on('click', function(){
    $('.items').toggleClass('editting');
})

这在Chrome中工作得很好,但在Internet Explorer中,即使在类被删除之后,动画也会继续播放。

奇怪的是,多点击两次按钮就会停止IE中的动画。

请参阅jsFiddle here

以前有没有其他人经历过这种情况?

EN

回答 1

Stack Overflow用户

发布于 2016-06-16 00:36:24

删除类名时,Internet Explorer似乎无法正确注册动画。

作为修复,我添加了一个not-editting类名来抵消editting动画。

通过添加此功能以及此CSS,我能够让Internet Explorer按预期运行。

代码语言:javascript
运行
复制
.not-editting .item {
    animation: none;
}

查看此updated jsFiddle

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37840536

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档