Имеется родительский элемент в relative позиционирование. У него имеется дочерний. Суть в том, что дочерний элемент изначально должен быть скрыт с нижней части, а затем плавно выезжает наверх. Для этого использую свойство bottom: 5%; Чтобы опустить элемент вниз, можно применить свойство bottom: auto, но в таком случае не будет работать анимация. Не получается применить свойство bottom с каким-то отрицательным процентом, так как высота блока в зависимости от дисплея пользователя всегда будет разной. Думаю, что без js тут не обойтись и придётся, высчитывать высоту, а потом уже строить стили на основе этой высоты. Но, может быть, есть решение с помощью css.
Вот что примерно получается:
$(document).ready(function(){
setTimeout(function(){
$('.child').addClass('close');
},500)
})
.parent
{
width: 100%;
height: 400px;
background-color: grey;
position: relative;
}
.child
{
border: 1px solid;
background-color: silver;
height: 10vh;
position: absolute;
width: 20vw;
bottom: 5%;
right: 5%;
transition: all 1s;
}
.child.close
{
bottom: -5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child"></div>
</div>
Пробовал заранее установить больше отрицательное значение для скрытия, что-то вроде bottom: -100%, но в таком случае анимация будет, конечно же, проигрываться очень быстро. Заранее благодарю.