使用jQuery動態顯示後同步CSS動畫

Question

正如您看到一些框元素被隱藏。點擊按鈕後，將顯示所有框元素。背景是動畫。不幸的是，這些動畫從用jQuery顯示它們之後的beginn開始。

有沒有辦法讓它們以某種方式同步？

下面是一個例子：

.box:nth-child(n+3) { 
    display: none; 
} 
.box { 
    display: block; 
    width: 200px; 
    height: 50px; 
    background: linear-gradient(337deg, rgba(31,212,166,1), rgba(24,54,141,1), rgba(102,24,141,1)); 
    background-size: 400% 400%; 
    animation: AnimationName 4s ease infinite; 
    margin-bottom: 5px; 
} 

的jQuery：

$('button').on('click', function(){ 
    $('.box:nth-child(n+3)').css('display', 'block') 
}) 

https://jsfiddle.net/boLgvcc8/

Answer 1

您可以設置第三個元素的高度爲0px，然後點擊你可以將它設置回到50與.css（'高度'，'50px'）;