javascript - 在 React 中使用 Javascript/Jquery 生成关键帧

Question

我正在 React 元素中制作动画。动画包含多个 bubble。

每个气泡都需要快速增长和收缩，我的 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 来针对特定于每个气泡的特定 translateing。

我需要一种在 javascript 中为每个气泡生成关键帧的方法，以便我可以将其调整为每个气泡的大小。或者，如果有办法保持我原来的 translate 位置，我可以简单地创建一个 css 动画来使用 transform:scale 完成此操作。

有人知道解决这个问题的好方法吗？

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 进行操作的方式类似。