I have created this page and when the "got it" button on the top panel is clicked, the panel will slide up and disappear while the page will also move up to cover the panel space. I have noticed that when the animation plays, it is not that smooth as white space can be seen in the split second that the page is sliding up. Is there any way to improve the animation to remove the split second in which the white space can be seen?

The code below is only a part of the complete one and won't be working properly like this one here as it is for reference only. Only pure HTML, CSS and Javascript are used.

const panel = document.getElementById('panel');
const page = document.getElementById('main-page');

function closePanel(){
  panel.classList.add('panel-animation');
  page.classList.add('page-animation');
  setTimeout(panel.style.transform = "translateY(-1000px)",1000);
  setTimeout(page.style.top = "0",1000);
}

*{
  margin:0;
  padding:0;
  }

.panel{
  height: 10%;
  width: 100%;
}

.notif-panel{
  z-index:1;
  position:fixed;
  display:grid;
  height:10%;
  width:100%;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

.panel-content{
  display:flex;
  height:100%;
  background-color:var(--smokeGrey);
  justify-content:center;
  align-items:center;
}

.panel-text{
  display:inline;
}

.cookie, .privacy, .tos{
  text-decoration:none;
}

.panel-button{
  display:inline;
  margin-left: 40px;
  padding: 10px 16px;
  background-color: #007bc1;
  color: white;
  border: none;
  border-radius: 2px;
}

.panel-button:hover{
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}

@media(max-width:675px){
  .notif-panel{
    height: 10%;
  }
  .panel-content{
    padding: 0 5px;
  }
  .panel-text{
    padding-right: 15px;
  }
  .panel-button{
    font-size: 17px;
    margin: 0;
}
}

@media(max-width:605px){
  .notif-panel{
    height: 15%;
  }
  .panel-content{
    align-items: left;
    display: block;
    padding: 10px;
    font-size: 18px;
  }
  .panel-text{
    padding-bottom: 10px;
    display: block;
  }
  .panel-button{
    font-size: 17px;
    margin: 0;
}
}

.main-page{
  position: absolute;
  width: 100%;
}

.hero{
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0,74,117,.52),rgba(0,74,117,.52)), url('assets/work-desk__dustin-lee.jpg');
  height: 600px;
}

.logo{
  height: 50px;
  width: 50px;
  position: absolute;
  left: 30px;
  top: 25px;
}

.hero-content{
  margin:0;
  text-align: center;
  color: white;
}

.name{
  font-size: 30px;
}

.contact-text{
  margin-top: 8px;
  padding-bottom: 25px;
}

.contact-button{
  font-weight: bold;
  color: white;
  background-color: transparent;
  border: white 2px solid;
  padding: 12px 15px;
  border-radius: 2px;
}

.contact-button:hover{
  color: var(--blue);
  background-color: white;
}

.panel-animation{
  animation: animation1 1s ease-in-out;
}

.page-animation{
  animation: animation2 .2s ease-in-out;
}

@keyframes animation1{
  from {
    transform: translateY(0);
  }
  to{
    transform:translateY(-500px);
  }
}

@keyframes animation2 {
  0% {
    top: 10%;
  }
  100% {
    top: 0;
  }
}

<div  id="panel">
    <div  id="notifPanel">
        <div >
            <p >By accessing and using this website, you acknowledge that you have read and
                <span  id="brCust"></span>understand our
                <a  href="#">Cookie Policy</a>,
                <a  href="#">Privacy Policy</a>, and our
                <a  href="#">Terms of Service</a>.
            </p>
            <button  onclick="closePanel()">Got it</button>
        </div>
    </div>
</div>

<div  id="main-page">
  <section  id="hero">
      <img src="assets/y-logo-white.png" >
      <div >
          <p >Hello! I'm Dylan Anderton</p>
          <h2 >Consult, Design, and Develop Websites</h2>
          <p >Have something great in mind? Feel free to contact me.<br> I'll help you to make it happen.</p>
          <button >LET'S MAKE CONTACT</button>
      </div>
  </section>
</div>

CodePudding user response：

Try changing your function like this:

function closePanel(){  
  setTimeout(() => {
    panel.classList.add('panel-animation');
  },1000);
  setTimeout(() => {
     page.classList.add('page-animation');
  },1000);
}

and implement the bottom two styles in your css i.e in .panel-animation and .page-animation respectively.

panel.style.transform = "translateY(-1000px)"
page.style.top = "0"

CodePudding user response：

This should work. What ruined your attempts was position: fixed on the .notif-panel. I marked all necessary changes:

function closePanel() {
  page.classList.add('page-animation');
  panel.classList.add('panel-animation');
}

.panel {
    position: relative;      /*