更简洁的 css/sass 关键帧代码编写方式

Question

我希望模态使用它们出现的动画的反转来隐藏。

到目前为止，我提出的策略是使用“反向”对应物创建 CSS 规则：

.modal-animate-zoom {
  animation: animatezoom 0.77s;
}

.modal-animate-zoom-reverse {
  animation: animatezoom-reverse 0.77s;
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

@keyframes animatezoom-reverse {
  from {transform: scale(1)} 
  to {transform: scale(0)}
}

当我想隐藏模态时，在 JavaScript 中做这样的事情：

modal.classList.remove('modal-animate-popup')
modal.classList.add('modal-animate-popup-reverse')
// modalsList is the children of parent container
setTimeout(_ => { modalsList.removeChild(modal); }, 770)

这有效。 我遇到的问题是：

1. CSS 中有很多重复（你可能不会称它为代码，但它在我的代码库中，我不会有我可以避免的愚蠢重复）
2. JS 中的超时时长需要与动画时长相匹配，显然我不想在 JS 和 CSS 中重复这些值。

我正在考虑这两个选项：

1. 尽我所能整理 CSS（我正在使用 SCSS），并且可能在 JavaScript 中收听转换完成事件
2. 使用 CSSOM 设置样式，从 JS 变量中获取超时值（但我不确定我是否可以使用类似 autoprefixer 的东西，但也许我的 Js 代码可以做到这一点？）

任何人都可以推荐任何一种方式或替代解决方案吗？

Answer 1

您可以删除animatezoom-reverse动画并根据包含的反向类更改animation-direction 。 请注意， forwards和reverse做两个完全不同的事情。

动画填充模式：向前

目标将保留由执行期间遇到的最后一个关键帧设置的计算值。

动画方向：反向

动画步骤向后执行，计时功能也反向执行。

 .modal-animate-zoom { animation: animatezoom 0.77s forwards; } .modal-animate-zoom-reverse { animation: animatezoom 0.77s reverse forwards; } @keyframes animatezoom { from {transform: scale(0);} to {transform: scale(1);} } .box { width: 100px; height: 100px; background-color: green; }

 <div class="box modal-animate-zoom">box</div> <div class="box modal-animate-zoom-reverse">box</div>

上面更精致的版本，重复更少：

 .modal-animate-zoom { animation: animatezoom 0.77s forwards; } .reverse-animation { animation-direction: reverse; } @keyframes animatezoom { from {transform: scale(0);} to {transform: scale(1);} } .box { width: 100px; height: 100px; background-color: green; }

 <div class="box modal-animate-zoom">box</div> <div class="box modal-animate-zoom reverse-animation">box</div>