ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.
window.onload = () => {
const popUp = document.getElementById('cookiePopup');
function showPopup() {
popUp.classList.add('show');
popUp.classList.remove('hide');
}
function hidePopup() {
popUp.classList.add('hide');
popUp.classList.remove('show');
}
document.getElementById('acceptCookie').addEventListener('click', () => {
localStorage.setItem('cookieAccepted', '1');
hidePopup();
});
if (localStorage.getItem('cookieAccepted') === '1') {
hidePopup();
} else {
showPopup();
}
};
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
.menu {
transform: translateX(-100%);
opacity: 0;
transition: all 0.5s ease;
}
.menu.ready {
transform: translateX(0);
opacity: 1;
}
const delay = 300;
[...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
setTimeout(() => {
menu.classList.add('ready');
}, delay * (index + 1))
});
<div class="circle"></div>
.circle, .circle::before {
width: 300px;
height: 300px;
border-radius: 100%;
}
.circle {
background: red;
position: relative;
}
.circle::before {
content: '';
position: absolute;
left: 30px;
top: -30px;
backgroud: blue;
}
.dgwt-wcas-sf-wrapp { opacity: 0; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { opacity: 1; }
.dgwt-wcas-search-input { opacity: 1; font-size: 16px; line-height: 1; }
.dgwt-wcas-sf-wrapp { color: transparent; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { color: black; }
.dgwt-wcas-search-input { color: black; font-size: 16px; line-height: 1; }