jquery - 反向CSS动画

Question

我有以下 CSS:

@keyframes divFadeIn {
    0%{opacity:0; transform: scale(0.5)}
    100%{opacity:1; transform: scale(1)}
}

.overlay {
    position: relative;
    top: -$headerHeight;
    z-index: 1000;
    height: 100%;
    animation: divFadeIn 0.3s 1 ease-out;
}

当我单击一个按钮时，它会影响 DIV，它会从中心动画到 100% 宽度。

但是，我如何才能让它在我单击另一个按钮时向后动画？

所以我点击第一个按钮 - 动画到 100%

我点击另一个按钮 - 以相反的方式动画到 0%

Answer 1

对于您的问题，您可以使用 divFadeIn 创建另一个具有相反值的关键帧 divFadeOut (将相反的方式设置为 0%)并创建一个类 fadeOut 内容:

.fadeOut {
    animation: divFadeOut 0.3s 1 ease-out;
}

从 overlay 类中删除 animation 并添加到 fadeIn 类中:

.fadeIn {
    animation: divFadeIn 0.3s 1 ease-out;
}

当您单击按钮时，您可以使用以下代码将上述动画之一删除或添加到 DIV。如果我使用 jQuery 工具:

$('#button1').click(function() {
    $('.overlay').addClass('fadeIn');
});

$('#button2').click(function() {
    $('.overlay').removeClass('fadeIn');
    $('.overlay').addClass('fadeOut');
});