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

我能找到的最佳方式＆＃34;禁用＆＃34;来自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;
}

隐藏元素作为动画的替代

1 个答案: