Question

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

我有一个隐藏的div，点击按钮弹出，并在关闭后弹出'in'。这是用jQuery show / hide处理的。对于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中测试了你的例子，通过简单地删除备用类并保留前向填充属性，您的代码似乎工作得很好。

弹出后的CSS动画弹出再次与彼此冲突

2 个答案: