css - 隐藏元素作为动画的替代

Question

我有以下 CSS Plunker Example :

@-webkit-keyframes ngdialog-fadeout {
  0% {opacity: 1;}
  100% {opacity: 0; }
}

@keyframes ngdialog-fadeout {  
  0% {opacity: 1;}
  100% {opacity: 0; }
}

.ngdialog.ngdialog-closing .ngdialog-overlay {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

.ngdialog.ngdialog-closing .ngdialog-content {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

我不想使用动画。所以我尝试了以下方法:

.ngdialog.ngdialog-closing .ngdialog-overlay {
  visibility: hidden;
}

.ngdialog.ngdialog-closing .ngdialog-content {
  visibility: hidden;
}

我能够隐藏它，但是在隐藏它之后页面上的每个链接都没有反应，就像它上面有东西一样......

我错过了什么？

更新

我尝试了以下方法:

.ngdialog {    
  bottom: 0;
  left: 0;
  overflow: auto;
  position: fixed;   
  right: 0;
  top: 0;
  z-index: 10000;
  -webkit-overflow-scrolling: touch;
}

.ngdialog-overlay {
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;  
  right: 0;
  top: 0;    
  opacity: 0.6;
  z-index: 100000;
}

.ngdialog.ngdialog-closing .ngdialog-overlay {  
  opacity: 0;
  visibility: hidden;
}

.ngdialog-content {
  background: white;
}

.ngdialog.ngdialog-closing .ngdialog-content {
  opacity: 0;
  visibility: hidden;
}

同样的问题发生...

Answer 1

我能找到的从 ngDialog 中“禁用”动画的最佳方法实际上是加快它们的速度，这样它们就不再可见了。

.ngdialog * {
  -webkit-animation-duration: 0.01s !important;
  -moz-animation-duration: 0.01s !important;
  -o-animation-duration: 0.01s !important;
  -ms-animation-duration: 0.01s !important;
  animation-duration: 0.01s !important;
}