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)

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

CSS中有很多重复项（您可能不会将其称为代码，但这是在我的代码库中，并且我不会避免任何愚蠢的重复项）
JS中的超时持续时间需要与动画持续时间匹配，并且显然我不想在JS和CSS中重复这些值。

我正在考虑以下两种选择：

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

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

Answer 1

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

animation-fill-mode: forwards

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

animation-direction: 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>

编写CSS / SASS关键帧代码的更简洁方法

1 个答案: