Как с помощью css и абсолютного позиционирования всегда скрывать элемент снину

Question

Имеется родительский элемент в 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%, но в таком случае анимация будет, конечно же, проигрываться очень быстро. Заранее благодарю.

Answer 1

Если я правильно понял, что нужно сделать (блок child, может иметь различную высоту, изначально он ниже всего блока parent, а потом становится внизу - ниже всего на 5%), то тут я вижу два варианта, оба с использованием transform: translate, потому как translate учитывает собственные размеры, а не родительские.

Использовать анимацию

.parent {
  width: 100%;
  height: 400px;
  background-color: grey;
  position: relative;
}

.child {
  border: 1px solid;
  background-color: silver;
  position: absolute;
  width: 20vw;
  bottom: -5%;
  right: 5%;
  padding: 10px;
  transform: translateY(100%);
  animation: position 1s  linear forwards 2s;
  opacity: 0;
}

@keyframes position {
    0% {
      opacity: 0;
        transform: translateY(100%);
    }
    90% {
        opacity: .5;
    }
    100% {
            opacity: 1;
        transform: translateY(0)
    }
}

<div class="parent">
  <div class="child">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus laborum excepturi nihil earum veniam placeat quos illo vel impedit iste.
  </div>
</div>

с добавлением класса, после загрузки

$(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;
  position: absolute;
  width: 20vw;
  bottom: -5%;
  right: 5%;
  padding: 10px;
  transition: 1s transform;
  transform: translateY(100%);
}



.child.close {
 transform: translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus laborum excepturi nihil earum veniam placeat quos illo vel impedit iste.
  </div>
</div>

БЛОГ НА HUSL

Как с помощью css и абсолютного позиционирования всегда скрывать элемент снину

Ответы (1 шт):