Jquery CSS动画“；"；

我制作了一段视频，向你们展示这个问题。我有一个纸牌动画。第一个动画是当你加载页面时，这些卡片会自动飞入

.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; }
}

---

这很好用。但是只是第一次出现在刷新页面上。当你们第一次点击卡片上的箭头时，一切都很好。但是当你关闭该卡并且想再次打开相同的卡时，它将不会播放溶解卡的动画。当你点击左大卡的箭头时，它会以某种方式“刷新”整个动画（就像当你重新加载页面时），并且它再次工作。但是一次又一次。谢谢你的帮助

由于您使用的是切换，因此如下所示：

单击1:

.animace1

添加

单击2:

.animace1

已删除

单击3:

.animace1

添加

---

第二次单击实际上删除了该类。将您的

toggleClass（x）

更改为

removeClass（'x'）。addClass（'x'）

如果您第三次单击它，它是否工作？@Malk Yes。第四次不，第五次是…我觉得它在课堂上不同步。显式地添加和/或删除类。@AhsN您的意思是这样吗？（截图）好的，明白了$（“.card4”）.removeClass（'animace13back'）.addClass（'animace13'）；