如何在传递变量值的 JavaScript 中指定内联关键帧？

Posted 2023-03-04

【中文标题】如何在传递变量值的 JavaScript 中指定内联关键帧？

【英文标题】：How to specify inline keyframes in JavaScript passing a variable value?

【发布时间】：2022-01-20 22:22:32

【问题描述】：

我有各种不同大小的通知元素，我会在计时器后将它们向上和向外滑动。我需要知道通知框的大小才能知道要移动多少，以便它下面的其他通知顺利滑入到位。

我想做类似的事情

notificationEl.current.style = `@keyframes slideOut  100%  margin-top: $amountToMove, opacity: 0`;

但它不起作用。我尝试在安装时在 useEffect 中使用 Element.animate() ，但这会导致奇怪的闪烁行为。

setTimeout(() => 
  notificationEl.current.animate([ opacity: 0 ,  marginTop: marginTop ], 
    animationTimingFunction: "ease-out",
    duration: 375,
  );
, 2625);

有没有更接近第一个示例的方法，我可以将变量分配给关键帧内的 margin-top？理想情况下，我想在安装时的 useEffect 中执行此操作。

多一点解释：

右侧有一个固定位置的通知容器，没有继承大小。它由从右侧滑入并排列在列中的特定通知填充。当最上面的一个滑出时，下面的应该滑入占据第一个留下的空间，这应该发生在第一个通知的滑出动画发生时，所以看起来很流畅。在第一个卸载之前，使用 translate 或“top”不会让底部的移动向上移动。折叠高度也不是我想要的，因为这会影响正在发出的通知的外观。

我必须将关键帧中的 margin-top 设置为边界客户端矩形的大小加上一个偏移量（这就是 amountToMove 所指示的），因为通知的大小可以而且确实会有所不同，因此移动它们的数量是为了使动画看起来流畅也各不相同。

【问题讨论】：

嗨。请问动画是强制的吗？我会在元素上设置一个默认转换时间，然后使用“top”属性。

@Fabrizio 不幸的是，这行不通。我需要使用 margin-top 因为我需要移动元素来影响文档流。

通知元素是如何定位的？也许更多的代码片段会阐明您是如何制作流程的。

@Fabrizio 我会在有空的时候尝试。右侧有一个固定位置的通知容器，没有继承大小。它由从右侧滑入并排列在列中的特定通知填充。当最上面的一个滑出时，下面的应该滑入占据第一个留下的空间，这应该发生在第一个通知的滑出动画发生时，所以看起来很流畅。使用 translate 或 top 在第一个卸载之前不要让底部的移动。折叠高度也不是我想要的。

【参考方案1】：

出于我的目的，一个不错的解决方案是使用

notificationEl.current.style.setProperty("--marginTop", `$amountToMove`);

然后在样式表关键帧声明中，使用变量：

@keyframes slideOut 
  100% 
    margin-top: var(--marginTop);
    opacity: 0;