在React中使用JavaScript/Jquery生成關鍵幀

Question

我正在製作一個反應項目中的動畫。動畫包括多個bubble s。

每個泡沫需要成長並迅速縮小，我的CSS動畫看起來像這樣

@keyframes bubbleTwitch { 
    0% { 
    width: 200px; 
    height: 200px; 
    } 
    50% { 
    width: 150px; 
    height: 150px; 
    } 
    100% { 
    width: 200px; 
    height: 200px; 
    } 
} 

然後我會重複無限，在很短的時間

.bubble { 
    animation-name:bubbleTwitch; 
    animation-duration:150; 
    animation-iteration-count:infinite; 
} 

但問題是每個泡泡都是不同的大小。我會使用transform:scale()，但我已經在使用transform來表示特定於每個泡泡的特定translate。

我需要一種方法來爲javascript中的每個氣泡生成關鍵幀，以便我可以將其調整爲每個氣泡的大小。或者，如果有辦法維護我原來的translate職位，我可以簡單地使用transform:scale創建一個css動畫來完成此操作。

任何人都知道一個很好的解決方法？

Answer 1

通過讓氣泡大小以百分比形式變化，您可以將每個氣泡的大小固定到外部div上。您的JSX可能看起來像：

<div className={s.bubbleContainer}> 
    <div className={bubble} /> 
</div> 

那麼CSS可以稱呼爲：

.bubbleContainer { 
    width: 200px; 
    height: 200px; 
} 

@keyframes bubbleTwitch { 
    0% { 
    width: 100%; 
    height: 100%; 
    } 
    50% { 
    width: 75%; 
    height: 75%; 
    } 
    100% { 
    width: 100%; 
    height: 100%; 
    } 
} 

這樣，你就可以用類似的方式設置每個bubbleContainer有不同大小的一類到你如何計劃用transform：scale來做到這一點。