javascript - 更简洁的 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 动画并根据包含的 reverse 类更改 animation-direction。请注意，forwards 和 reverse 做两件完全不同的事情。

animation-fill-mode: forwards

The target will retain the computed values set by the last keyframe encountered during execution.

animation-direction: reverse

Animation steps are performed backwards, and timing functions are also reversed.

.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>