Angular 9 - 简单的 CSS 动画 - （不是 Angular 动画！） - 如何向后（反向）重用关键帧？答案

【问题标题】：Angular 9 - Simple CSS Animations - (Not Angular Animation!) - How to reuse keyframes backwards (reverse)?Angular 9 - 简单的 CSS 动画 - （不是 Angular 动画！） - 如何向后（反向）重用关键帧？
【发布时间】：2020-07-03 06:36:28
【问题描述】：

目前，我不明白为什么我的动画只在一个方向上工作。

我已经输入了the whole example here online。

如果我使用两个关键帧，一切正常：


.show {
  animation: showMe 0.4s;
}

.hide {
  opacity: 0;
  margin-top: -80px;
  animation: hideMe 0.3s;
}


@keyframes hideMe {
  0% {
    opacity: 1;
    margin-top: 20px;
  }
  100% {
    opacity: 0;
    margin-top: -80px;
  }
}

@keyframes showMe {
  0% {
    opacity: 0;
    margin-top: -80px;
  }
  100% {
    opacity: 1;
    margin-top: 20px;
  }
}

但我认为如果我在reverse 方向重用hideMe，它也应该与.show 一起使用，类似于

.show {
  animation: hideMe 0.4s reverse;
}

而不是

.show {
  animation: showMe 0.4s;
}

我误解了这个概念吗？

【问题讨论】：

标签： html css angular animation

【解决方案1】：

Read this answer from stackoverflow

【讨论】：

谢谢，你会更新stackblitz吗，我已经尝试过了，但没有成功。也许我想念别的东西，..
是的，但请更详细地向我解释您想要实现的目标？
我想用一个关键帧名称而不是两个来做同样的事情（在工作示例中 - 请参见上面的链接）。我想重复使用关键帧。
是的，我看到了。当我点击按钮 'Toggle' 时，可以看到带有文本 'Play with me' 的蓝色框，当您再次点击该按钮时，蓝色框会消失。好的，我现在明白了