0

我创建了一个预加载器，我想在需要时使用 CSS3 过渡显示和隐藏，但是我的问题是我的覆盖位于所有其他元素之上，防止它们被点击等我想做的是使用 CSS3 过渡保持淡入淡出平滑柔和，如果我添加到display: none.overlay 然后这会阻止过渡生效，所以想知道如何在不依赖 js 进行淡入淡出的情况下实现这一点？另外添加会有所帮助，但没有得到广泛支持，并且会阻止我的关闭按钮被点击。display:block.overlay.is-activepointer-events: none

CSS

.overlay,
.loading {
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

.overlay {
   background: rgba(0,0,0,.6);
   position: fixed;
   /* display: none; */
   opacity: 0;
   -webkit-transition: opacity .3s;
}

.overlay.is-active {
    /*display: block;*/ 
    opacity: 1;
}

.close {
    width: 30px;
    height: 30px;
    background: grey;
    color: white;
    text-align: center;
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 200;
}

.loading {
    position: absolute;
    color: white;
    text-align: center;
}

JSFiddle：http: //jsfiddle.net/ejnpP/3/

4

2 回答 2

1

使用 z-index 您可以将叠加层推到其他元素下方或将其放回元素上方，小提琴：http: //jsfiddle.net/ejnpP/4/

.overlay {
   background: rgba(0,0,0,.6);
   position: fixed;
   opacity: 0;
   -webkit-transition: opacity .3s;
   z-index: -1;
}

.overlay.is-active {
    opacity: 1;
    z-index: 10;
}

z-index 的确切值取决于您的页面。

于 2013-09-02T11:12:33.197 回答
1

您可以使用 z-index 解决此问题：

.overlay {
    background: rgba(0,0,0,.6);
    position: fixed;
    opacity: 0;
    -webkit-transition: opacity .3s;
    z-index: -1;
}

.overlay.is-active {
    opacity: 1;
    z-index: 99;
}

或者您可以使用 javascript 添加一个 ontransitionend 侦听器，并在覆盖完成过渡时设置 display:none 属性

http://jsfiddle.net/jonigiuro/ejnpP/5/

于 2013-09-02T11:13:19.340 回答