Question

我正在设计一个模态。模态显示正确但转换不起作用。有人能告诉我为什么会这样吗？

请参阅此插件：http://plnkr.co/edit/Ruc9BHUZNxNZIIKV4Fj9?p=preview

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,.8);
  display: none;
}

.modal:target{
  display: block;
  opacity: 1;
}

.modal-dialog{
  width: 60%;
  border-radius: 5px;
  max-height: calc(100% - 100px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transition: opacity 7s ease-in;
  transition-delay: 2s;
}

.modal-header{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #F5F5F5;
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
  flex: 0 0 auto;
}

.modal-body{
  background-color: #fff;
  padding: 5px;
  overflow: scroll;
  flex: 1 1 auto;
}

.modal-footer{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #fff;
  padding: 5px;
  text-align: right;
  flex: 0 0 auto;
}

.modal-close{
  float: right;
  color: #e5e5e5;
  font-size: 15px;
  font-weight: bold;
  }

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>

    <div>
            <a href="#openModal1">Small Modal</a>
            <div id="openModal1" class="modal">
                <div class="modal-dialog">
                    <div class="modal-header">
                        <a href="#close" title="Close" class="modal-close">&times;</a>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div>Modal Body</div>
                    </div>
                    <div class="modal-footer">
                        <button>No</button>
                        <button>Yes</button>
                    </div>
                </div>
            </div>
        </div>
  </body>

</html>

Answer 1

使用visibility:visible代替display:block：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,.8);
  visibility: hidden;
  transition: opacity 7s ease-in;
  transition-delay: 2s;
  opacity: 0;
}

.modal:target{
  visibility: visible;
  opacity: 1;
}

http://plnkr.co/edit/Z25FZAdq8ZPdujLlOshG?p=preview

Answer 2

首先，您无法在CSS3过渡中使用display:none/block，而是使用visibility:visible/hidden

其次，转换初始状态和转换触发器需要在同一元素上

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,.8);
  visibility: hidden;
  opacity:0;
  transition: opacity 7s ease-in;
  transition-delay: 2s;
}
.modal:target{
  visibility: visible;
  opacity: 1;
}

请参阅http://plnkr.co/edit/5TBmSujnpEqLzdpI64EN?p=preview

CSS过渡不适用于模态

2 个答案: