CSS动画在弹出后再次弹出相互冲突

Question

我遇到了一个我没想到会发生的特殊问题。 Here is a codepen 的情况。是这样的：

我有一个隐藏的 div，它会在单击按钮时弹出，并在关闭后弹出“in”。这是通过 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 类中，关闭后它会保持隐藏状态，但无法再次打开。

所以我想知道我的思维过程哪里出错了；我们是否能够“覆盖”或“停止”forwards 设置？我错过了一些明显的东西吗？或者这不是这样做的方法，我应该研究一下 jQuery 动画吗？

Answer 1

首先，当您添加 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

---

旁注：建议您只使用一个按钮并处理您正在调用的函数内的状态更改，而不是让两个按钮根据状态相互替换。在进行切换时，某些浏览器/设备可能会触发点击这两个按钮。一键更安全。

Answer 2

我已经在 codepen 中测试了您的示例， 通过简单地删除替代类并保留前向填充属性，您的代码似乎工作得很好。