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')。

CSS动画“卡住”

1 个答案: