单击按钮时，我有一个覆盖整个视口(viewport)的 css 覆盖。它从 opacity: 0 淡入至 opacity: 1使用 css 关键帧。
叠加层依赖于向 <body> 添加类的 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; }
}
最佳答案
我可能会使用一个辅助类，然后切换该类来触发您的动画。
像这样:
.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 - 将 CSS 叠加动画化为淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30991753/