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動畫「卡住」

回答

相關問題