jquery - CSS 动画 "stuck"

Question

我制作了视频来向您展示确切的问题(向上)。我有一个卡片动画。第一个动画是当您加载页面时，这些卡片会自动飞入。

.card{
animation: startup .5s ease-in-out .2s 1 forwards;
}

@keyframes startup {
from {top: -150px; opacity: 0;}
to {top: 0px; opacity: 1;}
}

接下来我有动画，当你点击卡片上的粉红色箭头时，新窗口会从左边飞出，卡片会隐藏起来并有一点效果。当你想返回时，只需按新大卡上的粉红色箭头即可。

    $(".icon_card1").click(function () {
        $(".card1bg").css('opacity', '1');
    });
    $(".icon_card1").click(function () {
        $(".card1_content").css('margin-left', '0%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1_content").css('margin-left', '-45%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1bg").css('opacity', '0');
    });
    $(".icon_card1").on('click', function() {
        $(".card1").toggleClass('animace1');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card1").toggleClass('animace1back');
    });

CSS 部分:

.card1.animace1{
animation: myanimation1 1s ease-in-out 0s 1 forwards;
}
.card1.animace1back{
animation: myanimation1back 1s ease-in-out 0s 1 forwards;
}
@keyframes myanimation1 {
0%   { margin-top: 0px; opacity: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
30% { margin-top: -10px; opacity: 1; box-shadow: 0 20px 40px rgba(0,0,0,0.29), 0 12px 12px rgba(0,0,0,0.33);}
100% { margin-top: 300px; opacity: 0;}
}
@keyframes myanimation1back {
0%   { margin-top: 300px; opacity: 0; }
100% { margin-top: 0; opacity: 1; }
}

这工作正常。但是只是第一次在刷新页面上。当你第一次点击卡片的箭头时，一切都很好。但是当你关闭那张卡片，然后你想再次打开同一张卡片时，它不会播放溶解卡片的动画。当你点击左边那张大卡片的箭头时，它会以某种方式“刷新”整个动画(就像你重新加载页面时一样)并且它再次工作。但一次又一次。感谢您的帮助!

Answer 1

因为你使用的是切换，所以它是这样的:

点击 1:添加了 .animace1

点击 2:.animace1 已移除

点击3:添加了.animace1

第二次点击实际上删除了类。将 toggleClass(x) 更改为 removeClass('x').addClass('x')。