Html 移除类时如何反转此动画

当添加

.fade

时，我的淡入功能正常，但当类被删除时，我如何使其淡出？注意，我需要它最初包含display:none

.modal-backdrop {
    display: none;
    opacity: 0;
    &.in {
      animation: modalBackdropFadeIn 1s ease-out;
      display: block;
    }
  }


@-webkit-keyframes modalBackdropFadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: @xui-modal-backdrop-opacity;
  }
}

---

不是答案，而是可能的替代方案。可以在原始元素上使用转换吗？这样，新类的效果将在移除后平滑反转。动画不会自动产生反转效果（与过渡不同）。您必须手动编码反转关键帧，但即使如此，要使其100%完美也是一件痛苦的事情。你可能想看看这个帖子——不是答案，而是一个可能的选择。可以在原始元素上使用转换吗？这样，新类的效果将在移除后平滑反转。动画不会自动产生反转效果（与过渡不同）。您必须手动编码反转关键帧，但即使如此，要使其100%完美也是一件痛苦的事情。你可能想看看这条线-