我遇到了一个我没想到会发生的特殊问题。 Here is a codepen对于情况。情况是这样的:
我有一个隐藏的 div,单击按钮时会弹出,关闭后会弹出。这是通过 jQuery 显示/隐藏来处理的。对于 UX,我想通过 CSS 添加一个微妙的弹出动画。我添加了以下内容:
.popout { animation: popout .2s ease;}
.popin { animation: popin .2s ease;}
@keyframes popout {
from {transform:scale(0)}
90% {transform:scale(1.1)}
to {transform:scale(1)}
}
@keyframes popin {
from {transform:scale(1)}
10% {transform:scale(1.1)}
to {transform:scale(0)}
}
现在动画工作正常,但关闭弹出窗口(添加 popin 类)后,它会恢复到默认的 css 状态,这是可见的。所以结果是你看到弹出窗口缩小,然后再次出现并停留。
我可以通过向 CSS 动画调用添加 forwards
来“修复”此问题,但这会强制动画继续运行,而不管其他点击如何。换句话说;如果我将 forwards
添加到 CSS 动画,它会保持隐藏状态,但当您再次打开它时不会显示(因为 forwards
仍然处于事件状态)。
我再次引用the Codepen您可以在其中查看并亲自尝试。如果将 forwards
添加到 .popin
类,则关闭后它会保持隐藏状态,但无法再次打开。
所以我想知道我的思维过程哪里出了问题;我们能够“覆盖”或“停止”转发
设置吗?我错过了一些明显的东西吗?或者这不是这样做的方法,我应该研究 jQuery 动画吗?
最佳答案
首先,当您添加 popin
/popout
类时,您不会删除旧的类,因此最终会在元素上同时出现这两个类,从而使其成为更难(如果不是不可能的话)控制。
$('.open').click(function() {
//...
$('popup').removeClass('popin').addClass('popout');
});
$('.close').click(function() {
//...
$('popup').removeClass('popout').addClass('popin');
})
此外,您还需要考虑到,一旦动画结束,元素将恢复为适用于其的任何 CSS
规则。因此,如果您希望它们持续存在,您需要将 scale()
转换添加到类定义中:
.popout {
/* ... */
transform: scale(1);
}
.popin {
/* ... */
transform: scale(0);
}
工作示例:https://codepen.io/anon/pen/Emvjaj
<小时/>旁注:不要让两个按钮根据状态相互替换,建议您只使用一个按钮并在您调用的函数内处理状态更改。某些浏览器/设备在进行切换时可能会触发单击两个按钮。一键操作更安全。
关于jquery - CSS动画弹出后再次弹出相互冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43758653/