Question

单击按钮时，我有一个覆盖整个视口的css叠加层。它使用css关键帧从opacity: 0到opacity: 1淡出。

叠加层依赖于js插件向<body>元素添加类。因此，当应用该类时，叠加层将设置为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; }
}

Answer 1

我可能会使用辅助类，然后切换该类以触发动画。

像这样：

.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');

<强>更新

我错过了关于插件和display切换的部分。这应该仍然有效，你只需要担心javascript切换。我在上面的css中更新了css选择器。 display不会转换，但不透明会发生。

将CSS叠加动画为FadeIn和FadeOut

1 个答案: