CODEWITHSUNDEEP
css
takeradi
takeradi

Reputation: 3861

CSS Transitions not working for modals

I am designing a modal. The modal shows up correctly but the transition is not working. Can someone tell me why this is happening?

Please refer to this plunk: 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>

Upvotes: 1

Views: 2202

Answers (2)

sjm
sjm

Reputation: 5468

Firstly you can't use display:none/block in CSS3 transitions, use visibility:visible/hidden instead

Secondly the transition initial state and transition trigger need to be on the same element

.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;
}

See http://plnkr.co/edit/5TBmSujnpEqLzdpI64EN?p=preview

Upvotes: 2

Jonatas Walker
Jonatas Walker

Reputation: 14150

Use visibility:visible instead of 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

Upvotes: 6

Related Questions