Не работает transition при появлений модального окна:
<a class="btn">Modal</a>
<div class="modal">
<div class="overlay">
<div class="content">
<a class="close">X</a>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p>
</div>
</div>
</div>
//scss
.modal .overlay{
position: fixed;
top: 0;left: 0;
width: 100%;height: 100%;
background: rgba($color: #000000, $alpha: .8);
z-index: 1;
display: none;
}
.modal .content{
width: 500px;height: 200px;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 2;
text-align: center;
display: none;
a{
line-height: 30px;
font-weight: bold;
color: #fff;
top: -50px;;
position: absolute;
right: -50px;
font-size: 40px;
padding: 10px;
}
h1{
margin-bottom: 20px;
}
}
.modal.active .overlay{
display: block;
}
.modal.active .content{
display: block;
}
//Jquery
$(document).ready(function(){
$(".btn, .close").click(function() {
$(".modal").toggleClass("active")
})
})
Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.
Что делать?
