Javascript 使用不同的关键帧值设置新创建对象的动画

所以我尝试制作简单的动画。当你按下蓝色容器内的某个位置时，应该在该位置创建一个圆圈，然后向上移动。经过一些研究，我发现了如何将JS值放入关键帧，但它改变了每个对象的值，而不仅仅是新创建的对象。如果你跑的时候被剪掉，然后按高一点，再按低一点，你就会明白我在说什么

我发现了一些很棒的库解决方案，但我是一个初学者，我正在尝试在JS中制作类似的东西。有可能吗？怎么做

var气泡={
posX:0，
波西：0，
尺寸：0
};
var水族箱=document.getElementById（“容器”）；
var ss=document.styleSheets；
var-esrule=[]；
函数findAnimation（animName）{//用于查找关键帧并在其中插入替换值的函数
对于（变量i=0；i
正文{
背景色：红色；
保证金：0；
填充：0；
}
#容器{
宽度：100%；
身高：100%；
位置：固定；
顶部：80px；
左：0；
背景色：rgb（20255200）；
}
#表面{
宽度：100%；
高度：40px；
位置：固定；
顶部：40px；
不透明度：0.5；
背景色：rgb（250250）；
}
.泡泡{
位置：固定；
边框：1px纯蓝色；
}
.制作动画{
动画：moveUp 5s linear；//三次贝塞尔（1,0,1,1）；
-webkit动画：moveUp 5s linear；//立方贝塞尔（1,0,1,1）；
}
@关键帧向上移动{
0% {
顶部：400px；
}
100% {
顶部：80px；
}
}
@-webkit关键帧向上移动{
0% {
顶部：400px；
}
100% {
顶部：80px；
}
}
这里有一个可能的解决方案。我所做的：


删除函数
changeAnimation（）
和
findAnimation（）
-我们不需要它们
更新关键帧，使其看起来像-仅注意100%

@keyframes moveUp{100%{top:80px；}}

用
clientY
值分配新气泡的
top

5秒后，将气泡的顶部设置为容器的偏移量（80px）-动画结束时正好保持气泡的位置，否则将返回初始位置



var气泡={
posX:0，
波西：0，
尺寸：0
};
var水族箱=document.getElementById（“容器”）；
函数createBubble（e）{
“严格使用”；
bubble.posX=e.clientX；
bubble.posY=e.clientY；
bubble.size=Math.round（Math.random（）*100）；
var bubbleCircle=document.createElement（“div”）；
水族馆。附属物儿童（泡泡圈）；
bubbleCircle.className=“bubble”；
var bubbleStyle=bubbleCircle.style；
bubbleStyle.width=bubble.size+“px”；
bubbleStyle.height=bubble.size+“px”；
bubbleStyle.borderRadius=（bubble.size/2）+“px”；
bubbleStyle.top=bubble.posY-（bubble.size/2）+“px”；
bubbleStyle.left=bubble.posX-（bubble.size/2）+“px”；
bubbleCircle.className+=“动画”；
//以下代码将注意将顶部重置为顶部
//#容器的偏移量为80px，否则圆将返回到
//创建它的位置
（功能（风格）{
setTimeout（函数（）{
style.top='80px'；
}, 5000);
})（泡泡风）；
}
水族馆。addEventListener（“单击”，创建气泡）
正文{
背景色：红色；
保证金：0；
填充：0；
}
#容器{
宽度：100%；
身高：100%；
位置：固定；
顶部：80px；
左：0；
背景色：rgb（20255200）；
}
#表面{
宽度：100%；
高度：40px；
位置：固定；
顶部：40px；
不透明度：0.5；
背景色：rgb（250250250）；
}
.泡泡{
位置：固定；
边框：1px纯蓝色；
}
.制作动画{
动画：移动5s线性；
/*三次贝塞尔（1,0,1,1）*/
-webkit动画：moveUp 5s线性；
/*三次贝塞尔（1,0,1,1）*/
}
@关键帧向上移动{
100% {
顶部：80px；
}
}
@-webkit关键帧向上移动{
100% {
顶部：80px；
}
}
代码的问题在于您正在更新应用于所有气泡的关键帧。我尝试了另一种方法，在元素添加到DOM后使用并更改
top
位置（否则它将不会被设置动画）

这里的主要问题是等待元素添加到DOM中。我尝试使用，但它似乎是在元素实际添加到DOM（或至少呈现）之前调用的。因此，我发现的唯一方法是使用一个超时来模拟这种等待，尽管肯定有一个更好的超时（因为它可能被调用得太早，导致气泡直接粘在顶部），我很乐意听到这个消息。