при переходе на страницу, выезжает блок сверху как правильно реализовать?

Question

Подскажите начинающему ломастеру как правильно реализовать плавно выезжающий блок сверху страницы...
Блок содержит фото(обложка профиля) opacity не интересен..
Более интересно в виде toggle? Соответственно после покидания страницы, чтобы этот блок так же плавно и заезжал

.prpic1 { 
  position: absolute;

  width: 100%;
  height: 0px;
  background: rgb(255, 255, 255);
  border-radius: 0px 0px 25px 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

<div class="prpic1">
  <img src="img/profilepicture.jpg">
</div>

P.s.

Есть страница Home главная, и на ней есть ссылка на страницу Profile.
Так вот, я хочу, когда переходишь на страницу Profile, сверху плавно опускался блок и оставался на том же месте, пока я нахожусь на этой страницы, но когда я ухожу со страницы Profile, например на ту же страницу Home, то этот блок должен плавно подниматься вверх в обратном порядке

Answer 1

Всё оказалось намного проще чем ожидалось)
реализовал через функцию JQuery

$(document).ready ( function(){
  $(".prpic1").animate({height: '180'}, 700) 
});

Answer 2

Странно, что вы не говорите как у вас реализован момент отлавливания "ухода" со страницы, это важно..

По этом в качестве примера покажу вариант на кнопках.

var prpic1 = document.querySelector('.prpic1');

document.querySelector('#show').addEventListener('click', function() {
  prpic1.classList.add('prpic1--show');
});

document.querySelector('#hide').addEventListener('click', function() {
  prpic1.classList.remove('prpic1--show');
})

.prpic1 { 
  display: inline-block;
  border-radius: 0 0 25px 25px;
  background: #ccc;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 5px;
  transform: translateY(calc(-100% - 15px)); /* - 15px => тень */
  transition: transform 1s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.prpic1.prpic1--show {
  transform: translateY(0);
}

.prpic1 img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0;
  object-fit: contain;
}

<div class="prpic1">
  <img src="https://i.imgur.com/cVbIawF.png">
</div>

<input type="button" id="show" value="Пришёл" style="margin-top: 110px;">
<input type="button" id="hide" value="Ушёл">

Тут по сути всё завязано на CSS.
Для появления карточки вы добавляете класс .prpic1--show, а для скрытия - убираете его.

Тянуть JQ ради .animate вообще не советую, у JS анимация тоже есть

БЛОГ НА HUSL

при переходе на страницу, выезжает блок сверху как правильно реализовать?

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