将CSS覆盖设置为淡入淡出和淡出动画

我有一个css覆盖，当点击按钮时覆盖整个视口。它使用css关键帧从

opacity:0

淡入

opacity:1

覆盖依赖于js插件向

元素添加类。因此，当应用该类时，覆盖设置为

display:block

我正试图反向设置这个效果的动画。因此，当删除该类时，覆盖将淡出

我知道我可以对

.overlay

类应用多个动画，但我不确定如何继续

你知道我该如何反转动画吗

.overlay {
  // Overlay base styles
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999999;
  cursor: pointer;

  // Set transition for overlay
  -webkit-transition:         all 425ms ease-in-out;
  -moz-transition:            all 425ms ease-in-out;
  -ms-transition:             all 425ms ease-in-out;
  -o-transition:              all 425ms ease-in-out;
  transition:                 all 425ms ease-in-out;


  // Set the animation duration
  -webkit-animation-duration:   1.1s;
  -moz-animation-duration:      1.1s;
  -ms-animation-duration:       1.1s;
  -o-animation-duration:        1.1s;
  animation-duration:           1.1s;

  // Set the animation fill mode
  -webkit-animation-fill-mode:  both;
  -moz-animation-fill-mode:     both;
  -ms-animation-fill-mode:      both;
  -o-animation-fill-mode:       both;
  animation-fill-mode:          both;

  // Name the Animation
  -webkit-animation-name:       fadeIn;
  -moz-animation-name:          fadeIn;
  -ms-animation-name:           fadeIn;
  -o-animation-name:            fadeIn;
  animation-name:               fadeIn;
}

// When is showing class is applied
// make the overlay display block
.scotch-is-showing .overlay {
  display: block;
}

// Setup keyframes animations
// Chrome
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Firefox
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// Opera
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// All other browsers
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

---

我可能会利用一个helper类，然后切换该类以触发动画

像这样：

.overlay {
  // Overlay base styles
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999999;
  cursor: pointer;

  opacity: 0;

  -webkit-transition:         all 1.1s ease-in-out;
  -moz-transition:            all 1.1s ease-in-out;
  -ms-transition:             all 1.1s ease-in-out;
  -o-transition:              all 1.1s ease-in-out;
  transition:                 all 1.1s ease-in-out;
}
 .scotch-is-showing .overlay{
      display:block;
      opacity: 1;
    }

您不需要关键帧，因为它只是将不透明度从0更改为1

使用javascript切换

fadeIn

类。添加它将在覆盖中淡出，删除它将淡出

使用jQuery时，它可能如下所示：

$（'.overlay'）.toggleClass（'fadeIn'）

更新

我错过了关于插件和显示切换的部分。这应该仍然有效，您不必担心javascript切换。我已经在上面的css中更新了css选择器<代码>显示

不会转换，但不透明度会转换。

我在想，不使用关键帧，我可以只添加

不透明度：1到显示覆盖的类，并且
不透明度：0
到
.overlay
类，然后执行简单的转换，而不是动画。请记住，淡出的覆盖仍然会阻碍视口。您还需要设置一个定时事件来隐藏布局。@Myst我更新了我的响应。我错过了有关
显示的部分