CSS动画“卡住”

我制作的视频向你展示确切的问题（上）。我有一张卡片动画。第一个动画是当你加载页面时，这些卡片会自动飞入。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; } 
}

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

来源

2016-01-25 Honzis Novák

如果你第三次点击它，它会工作吗？ – Malk

@Malk是的。第四次没有，第五次是... –

我有一个印象，它不同步toggleClass。显式添加和/或删除类。 –

由于您使用拨动它是这样的：

点击1：.animace1添加

点击2：.animace1去除

点击3：.animace1添加

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

来源

2016-01-25 21:45:12 Malk

所以像这样...？ https://ctrlv.cz/shots/2016/01/25/7L0o.png（屏幕截图） –

行，明白了... $（“。card4”）。removeClass（'animace13back'）。addClass（'animace13 “）; –

CSS动画“卡住”

回答

相关问题