CSS动画＆QUOT;卡＆QUOT; [英] CSS animation "stuck"

问题描述

我为节目视频，你确切的问题（上）。我有卡的动画。第一个动画是在加载页面，这些卡会自动飞

I made video for show you exact problem (up). I've got an animation of cards. 1st animation is when you load page, these cards are fly in automatically.

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

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

接下来我有动画，当你点击的粉色箭头卡，新窗口将飞左，卡将具有影响不大隐藏。而当你想回到你刚才美元新大卡p $ PSS的粉红色箭头。

Next I have the animation, when you click on pink arrow on card, new window will fly from left and cards will hide with a little effect. And when you want to go back you just press pink arrow on new big card.

    $(".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; }
}

这是工作的罚款。但仅适用于首次被刷新页面。当你点击卡上的箭头第一次，一切都很好。但是，当你关闭该卡，并要再次打开的<​​strong>相同卡，也不会起到溶解卡的动画。当你点击那个大左卡上的箭头，它会以某种方式刷新全动画（当你重新加载页面等），并重新工作。但随后连连。感谢您的帮助！

This is working fine. But only for first time being on refreshed page. When you click on card's arrow first time, everything is good. But when you close that card and you want to open same card again, it won't play animation of dissolve cards. When you click on that big left card's arrow, it will somehow "refresh" whole animation (like when you reload the page) and it is again working. But then again and again. Thanks for any help!

推荐答案

由于您使用它切换是这样的：

Since you are using toggle it goes like this:

点击1： .animace1 添加

点击2： .animace1 删除

点击3： .animace1 添加

第二次单击实际删除的类。更改 toggleClass（X）到 removeClass移除（X）。addClass（'X'）。

The second click actually removed the class. Change your toggleClass(x) to removeClass('x').addClass('x').

这篇关于CSS动画＆QUOT;卡＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！