在 React 中使用 Javascript/Jquery 生成关键帧答案

【问题标题】：Generating keyframes using Javascript/Jquery in React在 React 中使用 Javascript/Jquery 生成关键帧
【发布时间】：2017-10-12 03:34:13
【问题描述】：

我正在 React 项目中制作动画。动画包含多个bubbles。

每个气泡都需要快速增长和缩小，我的 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 位置，我可以简单地使用transform:scale 创建一个css 动画来完成此操作。

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

【问题讨论】：

标签： javascript jquery css reactjs

【解决方案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 的方式类似。

【讨论】：