Как сделать плавную анимацию возврата меню в исходное положение?

Question

[Zhenya Tureysky]

Есть вот такое фиксированное меню

<div class="header__top">
			<div class="container">
				<div class="header__top__wrap">
					<div class="header__top__left">
						<svg width="153" height="58" viewBox="0 0 153 58" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M12.2446 28.3687C12.2446 20.0744 17.6204 13.9438 25.6243 13.9438C31.9557 13.9438 37.0926 17.7905 37.0926 21.6371C37.0926 23.2599 36.0174 24.3418 34.2255 24.3418C29.8652 24.3418 30.0444 16.4081 24.3102 16.4081C21.0848 16.4081 18.158 19.5936 18.158 24.7024C18.158 32.7563 22.8767 38.0454 27.7746 38.0454C31.8363 38.0454 34.1658 35.1003 35.4201 32.9366C36.0772 32.0951 37.5107 32.3356 37.3315 33.5977C36.9134 38.7065 33.2101 43.5148 25.9827 43.5148C18.3372 43.5148 12.2446 36.1822 12.2446 28.3687Z" fill="#FBFAF7"/>
							<path d="M39.3027 42.4332V42.2529C39.3027 41.2311 40.8557 40.9306 40.8557 39.1876V19.2332C40.8557 17.4301 39.3027 17.0094 39.3027 16.1679V15.9876C39.3027 15.5669 39.6014 15.3866 40.0792 15.1462L45.1563 12.6218C46.2315 12.0809 46.8288 12.6819 46.8288 13.3431V39.1275C46.8288 40.8104 48.561 41.171 48.561 42.1928V42.3731C48.561 42.7938 48.1429 43.0944 47.6053 43.0944H40.2584C39.6611 43.0944 39.3027 42.8539 39.3027 42.4332Z" fill="#FBFAF7"/>
							<path d="M68.5706 37.3846C68.3317 39.7287 65.5841 43.5152 60.3875 43.5152C54.7728 43.5152 50.6514 39.4282 50.6514 33.1774C50.532 27.8282 54.7131 23.3204 60.0889 23.2002C60.2083 23.2002 60.3278 23.2002 60.3875 23.2002C65.6438 23.2002 68.033 26.2655 68.033 28.9701C68.0928 30.1722 67.376 31.2541 66.2411 31.6748L57.2815 35.7619C58.1775 37.9256 60.2681 39.308 62.5976 39.308C64.4492 39.3681 66.1814 38.4665 67.1968 36.9639C67.6747 36.3629 68.5706 36.5432 68.5706 37.3846ZM56.2064 30.4126C56.2064 31.6147 56.3258 32.7567 56.6245 33.8986L61.8211 31.2541C62.5378 30.8935 62.9559 30.1121 62.8962 29.3308C62.8962 27.8883 61.8211 25.0033 59.6707 25.0033C57.5204 25.0033 56.2064 27.3473 56.2064 30.4126Z" fill="#FBFAF7"/>
							<path d="M86.6094 26.9262C86.6094 28.6091 85.9523 30.1117 84.0409 30.1117C80.8752 30.1117 82.3088 26.6257 80.0987 26.6257C78.5457 26.6257 77.9484 28.8495 77.9484 31.0733V39.1873C77.9484 40.8702 79.9793 41.2309 79.9793 42.2526V42.4329C79.9793 42.9137 79.6209 43.1542 79.0833 43.1542H71.6767C71.0794 43.1542 70.721 42.9137 70.721 42.4329V42.2526C70.721 41.2309 72.274 40.9303 72.274 39.1873V29.7511C72.274 27.9479 70.4224 27.8277 70.4224 26.806V26.6257C70.4224 26.2049 70.721 25.9044 71.2586 25.664L76.0968 23.3801C76.9927 22.9593 77.4109 23.4402 77.4109 24.2215V27.2868C78.3068 24.7024 80.2182 23.2599 82.9061 23.2599C84.8174 23.1397 86.4899 24.6422 86.6094 26.5656C86.6094 26.6858 86.6094 26.806 86.6094 26.9262Z" fill="#FBFAF7"/>
							<path d="M110.263 42.313V42.4332C110.263 42.914 109.964 43.1544 109.427 43.1544H101.901C101.483 43.2145 101.124 42.914 101.124 42.4933V42.4332V42.3731C101.124 41.3513 102.617 41.1109 101.96 40.1492L97.6 33.9586L95.2108 36.1824V39.2477C95.2108 40.9306 96.943 41.2912 96.943 42.313V42.4933C96.943 42.914 96.5846 43.2145 95.9873 43.2145H88.5807C88.0431 43.2145 87.6847 42.914 87.6847 42.4933V42.313C87.6847 41.2912 89.2377 40.9907 89.2377 39.2477V19.2332C89.2377 17.4301 87.4458 17.0093 87.4458 16.1679V15.9876C87.4458 15.5668 87.7445 15.3865 88.282 15.1461L93.6578 12.6218C94.6135 12.1409 95.2705 12.6819 95.2705 13.343V33.057L101.662 27.5275C102.856 26.5057 100.706 25.4839 100.706 24.5223V24.342C100.706 23.9213 101.005 23.6207 101.542 23.6207H107.276C107.754 23.6207 108.113 23.8612 108.113 24.2819V24.4622C108.113 25.4839 106.142 26.1451 104.648 27.4674L101.363 30.5327L108.113 40.0891C108.77 40.9907 110.263 41.3513 110.263 42.313Z" fill="#FBFAF7"/>
							<path d="M110.263 38.767C110.263 37.2043 111.338 36.5432 112.652 36.5432C116.176 36.5432 114.802 41.8924 118.864 41.8924C120.536 41.8924 121.791 41.051 121.791 39.1878C121.791 33.7784 110.561 37.1442 110.561 29.1505C110.561 25.7245 113.906 23.2002 118.744 23.2002C123.822 23.2002 127.047 25.5442 127.047 28.0686C126.987 29.2707 125.972 30.2323 124.837 30.1722C121.492 30.1722 122.687 24.8831 119.163 24.8831C117.729 24.823 116.534 25.965 116.534 27.4074C116.534 27.4676 116.534 27.5277 116.534 27.5878C116.534 33.1173 127.525 29.8717 127.525 37.6251C127.525 40.9308 124.299 43.4551 118.924 43.4551C113.667 43.4551 110.263 41.2914 110.263 38.767Z" fill="#FBFAF7"/>
							<path d="M150.342 24.2821V24.4624C150.342 25.4842 149.088 25.8448 148.311 27.6479L140.666 44.3567C139.352 47.2417 136.007 54.394 131.826 54.394C128.182 54.394 125.912 52.1702 125.912 50.0665C125.853 48.8044 126.808 47.7225 128.063 47.6624C128.182 47.6624 128.242 47.6624 128.361 47.6624C131.646 47.6624 130.631 52.5308 132.722 52.5308C134.155 52.5308 137.022 47.0613 138.157 44.2966L130.093 27.6479C129.198 25.8448 127.943 25.4842 127.943 24.4624V24.2821C127.943 23.8614 128.302 23.6209 128.779 23.6209H136.305C136.664 23.5608 137.022 23.8614 137.082 24.2821V24.3422V24.5225C137.082 25.5443 135.589 25.6645 136.485 27.7681L141.203 38.7671L145.564 28.3691C146.639 25.8448 143.772 25.5443 143.772 24.5826V24.4023C143.772 23.9816 144.07 23.681 144.608 23.681H149.506C149.984 23.6209 150.342 23.9215 150.342 24.2821Z" fill="#FBFAF7"/>
							<path d="M6.33156 25.6642C6.3913 25.7243 6.33156 25.8445 6.27183 25.9046C6.2121 25.9647 6.09264 25.9046 6.03291 25.8445C4.8383 24.1616 2.5088 20.0145 2.688 13.1026C2.688 11.059 3.10611 9.01551 3.88261 7.09219C4.53965 5.5295 6.33156 2.94504 8.36241 3.78649C10.3932 4.62794 7.58591 7.75333 6.9886 8.65488C3.52422 13.8839 4.36045 20.0746 6.33156 25.6642Z" fill="#FDBC4E"/>
							<path d="M7.46655 22.4789C7.46655 22.539 7.40682 22.539 7.34709 22.539C7.28736 22.539 7.28736 22.4789 7.28736 22.4789C7.04844 20.0146 6.92897 14.6053 9.19874 9.85709C10.2739 7.51305 11.9463 5.46953 14.0369 3.96694C14.8134 3.42601 15.7094 3.12549 16.6651 3.12549C17.8 3.2457 18.6959 4.26746 18.1583 5.40943C17.3221 7.15243 15.0523 7.39285 13.6188 8.47471C11.7672 9.8571 10.4531 11.9607 9.55712 14.0643C8.48197 16.7089 7.7652 19.5939 7.46655 22.4789Z" fill="#FDBC4E"/>
							<path d="M9.73633 21.2165C9.73633 20.7357 9.79606 20.2549 9.91552 19.8341C10.3934 18.1512 11.0504 16.5284 11.9464 15.0258C14.3356 10.9989 17.8 7.45278 22.3992 6.37092C23.773 6.0103 28.2528 6.0103 26.8193 8.65486C25.8636 10.3378 23.116 9.61651 21.563 9.91703C18.5765 10.5181 16.1872 12.3813 14.0967 14.4849C11.8269 16.8289 9.85579 21.2766 9.73633 21.2165Z" fill="#FDBC4E"/>
						</svg>
					</div>
					<div class="header__top__right">
						<a class="header__top__info" href="#!">Log In</a>
						<a class="header__top__info header__top__info__none" href="tel[phone]">844-332-6440</a>
						<div class="btn btn__header">Get Started</div>
					</div>
				</div>
			</div>
		</div>

.header__top {
    background: var(--primery-color);
    /*background: #000;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}
.header__top__scrol {
    animation: scroltopmenu 1s forwards;
}
@keyframes scroltopmenu {
    0% {
        padding: 20px 0px;
    }

    100% {
       padding: 7px 0px; 
    }
}

.header__top__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
}

window.onscroll = () => {
	const header__top__wrap = document.querySelector('.header__top__wrap')
	const Y = window.scrollY

	if(Y > 700) {
		header__top__wrap.classList.add('header__top__scrol')
	}
	if(Y < 700) {
		header__top__wrap.classList.remove('header__top__scrol')
	}
}

При скроле вниз оно немного уменьшает свою высоту , а когда проматываешь вверх оно возвращается в исходное положение но это происходит очень резко оно зразу становиться той высоты которая была изначально, а нужно чтоб это было все плавно
Как мне это сделать ?

Вот это все дело на codepen
https://codepen.io/Zhenya-Tureysky/pen/ExRVPqe

Comments

[godsplan]

Нужно добавлять еще один класс при закрытии

[Alexey Levicky]

Вы добавляете класс с анимацией а потом удаляете. При удалении класса хедер переходит к исходным стилям, но там анимации нет. В данном случае лучше использовать смену состояний через transition

.header {
  padding: 20px 0;
  transition: padding 1s ease-in-out;
  transform: translateZ(0); // optimization hack
  will-change: padding;
}
.header__top__scroll {
  padding: 7px 0;
}

[Zhenya Tureysky]

godsplane, а как это сделать ?

Answer 1

[Noder SS]

Версия с анимацией запутывает, могу с нуля сделать

Comments

[Zhenya Tureysky]

ну давай если не сложно

[Noder SS]

Zhenya Tureysky,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="hat"><img src="chef.jpg" alt="" height="60"> <div class="items-hat"><p>Главная</p>
  <p>Магазин</p>
  <p>Контакты</p>
  <p>Lorem</p></div></div>
</body>
<style>
  @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
*{
  margin:0;
  padding:0;
}
body{
  height: 20000px;
}
  .hat{
    width: 100%;
    height: 60px; 
    padding: 10px 0px 10px 0px;
    position: fixed;
    display: flex;
    transition-duration: 0.2s;
    background: rgb(198, 235, 255);
    justify-content: space-around;
    align-items: center;

  }
  .items-hat{
    width: 500px;
    font-family: Montserrat;
    font-weight: 400;
    cursor: pointer;
    display: flex;
justify-content: space-between;
  }
</style>
<script>
  let hat = document.querySelector('.hat')
window.onscroll = function(){
  let scroll = window.scrollY
  if(scroll >= 700){
    hat.style.padding = "5px 0px 5px 0px"
  }
  else if(scroll < 700){
    hat.style.padding = "10px 0px 10px 0px"
  }
}
</script>
</html>

[Noder SS]

Zhenya Tureysky, допоміг? Чи як

[Noder SS]

Zhenya Tureysky, Жень, ты жив то еще?