Я пытаюсь показать div при нажатии кнопки, представленной внизу страницы, поэтому я дал плавный переход для этого.проблема в том, что когда я нажимаю кнопку, он показывает div с переходом, но, не раскрывая его, он выключается полностью без какого-либо перехода.вот фрагмент
<div class="jump reveal"> <!-- media -->
<!-- Thumbnail images -->
<div class="row" id="gallry"> <!-- imagecontainer -->
<div class="column">
<img class="demo cursor" src="random.png" style="max-width:100%"
alt="Page 1">
</div>
</div>
</div>
<a class="button page expand " id="caption"></a>
</div>
</div>
css:
.jump{
display: none;
background-color:#2f2f2f;
transition: 2s all linear;
}
@-webkit-keyframes slideup{
0%{bottom: -200px}
100%{bottom: 0px}
}
.page{
position:fixed;
bottom: 0px;
left: 75%;
width: 80px;
height: 25px;``
font-size: 1rem;
color: white;
padding-top: 4px;
margin-bottom: 0;
text-align: center;
background-color: black;
border-radius: 10px 10px 0 0;
z-index: 2;
transition: 0.2s all ease;
-webkit-transition:0.2s all ease;
-o-transition:0.2s all ease;
}
.expand{
bottom: 250px;
position: fixed;
transition: 0.2s all ease;
-o-transition:0.2s all ease;
-webkit-transition:0.2s all ease;
z-index: 2;
margin-bottom: 0px;
cursor: pointer;
}
.reveal{
position: fixed;
width: 100%;
height: 250px;
float: left;
background-color: black;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
bottom: 0px;
-webkit-animation:slideup 0.2s ease;
animation: slideup 0.2s ease;
-o-animation:slideup 0.2s ease;
border-top:1px solid black;
display: inline-block;
z-index: 3;
}
jquery:
$(".page").click(function() {
$(this).toggleClass("expand");
$(".jump").toggleClass("reveal");
}