实现平滑的上滑动画效果：优化通知面板的显示与隐藏

本文旨在解决网页中通知面板上滑动画不流畅的问题，通过分析现有代码的不足，详细介绍了三种优化方案：利用 `position: sticky` 实现无抖动吸顶效果、使用 css transitions 实现同步动画、以及运用 web animations api 精确控制动画过程。最终帮助开发者实现更平滑、更专业的用户体验。

2. JavaScript 修改：

   • 获取通知面板的高度。
   • 设置 margin-bottom 和 transform 属性，实现上滑动画。
   • 在动画结束后，移除通知面板。

   const panel = document.getElementById('panel');
   const page = document.getElementById('main-page');
   
   function closePanel(){
     const {bottom} = panel.getBoundingClientRect();
     panel.style.marginBottom = 0 + "px";
     panel.addEventListener("transitionend", () => panel.replaceWith());
   
     // marginBottom shrinks the element;
     // translateY() slides it out.
   
     setTimeout(() => {
       panel.style.marginBottom = `${-bottom}px`;
       panel.style.transform = `translateY(${-bottom}px)`;
     }, 0);
   }

完整代码：

  

    

      
By accessing and using this website, you acknowledge that you have read and
        understand our
        Cookie Policy,
        Cookie Policy, and our
        Terms of Service.
      
      Got it
    
  



  

      @@##@@
      

          
Hello! I'm Dylan Anderton
          
Consult, Design, and Develop Websites
          
Have something great in mind? Feel free to contact me.
 I'll help you to make it happen.
          LET'S MAKE CONTACT
      
  

.panel{
  z-index: 1;
  position: sticky;
  top: 0;
  transition:
    margin-bottom 1s,
    transform 1s;
}
.hero {
  position: relative;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

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

.panel-text{
  display:inline;
}

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

.panel-button{
  display:inline;
  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;
}
}

@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;
}
}

.main-page{
  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;
}

方案二：使用 CSS Transitions

CSS Transitions 允许我们平滑地改变 CSS 属性的值。

实现步骤：

1. CSS 修改：

   • 将 .panel 的 position 设置为 fixed。
   • 添加 transition 属性，控制 top 的动画效果。
   • 将 position:fixed 移动到 .panel 元素。

   /* I had to move position:fixed to this top-level element */
   .panel{
     z-index: 1;
     position: fixed;
   }

2. JavaScript 修改：

   • 获取通知面板的高度。
   • 设置 top 属性，实现上滑动画。
   • 在动画结束后，移除通知面板。

   const panel = document.getElementById('panel');
   const page = document.getElementById('main-page');
   
   function closePanel(){
     const rectPanel = panel.getBoundingClientRect();
     panel.style.top = 0;
     page.style.top = rectPanel.bottom + "px";
   
     panel.style.transition = "top 1s ease-in-out";
     page.style.transition = "top 1s ease-in-out";
   
     // Don't forget to remove it from the DOM
     panel.addEventListener("transitionend", () => panel.replaceWith());
   
     setTimeout(() => {
       panel.style.top = -rectPanel.bottom + "px";
       page.style.top = 0;
     }, 0);
   }

完整代码：

  

    

      
By accessing and using this website, you acknowledge that you have read and
        understand our
        Cookie Policy,
        Privacy Policy, and our
        Terms of Service.
      
      Got it
    
  



  

      @@##@@
      

          
Hello! I'm Dylan Anderton
          
Consult, Design, and Develop Websites
          
Have something great in mind? Feel free to contact me.
 I'll help you to make it happen.
          LET'S MAKE CONTACT
      
  

/* I had to move position:fixed to this top-level element */
.panel{
  z-index: 1;
  position: fixed;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

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

.panel-text{
  display:inline;
}

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

.panel-button{
  display:inline;
  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;
}
}

@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;
}
}

.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;
}

方案三：使用 Web Animations API

Web Animations API 提供了更强大的动画控制能力，可以精确地控制动画的每一个细节。

Shakespeare

一款人工智能文案软件，能够创建几乎任何类型的文案。

下载

实现步骤：

1. CSS 修改：

   • 将 .panel 的 position 设置为 fixed。
   • 将 position:fixed 移动到 .panel 元素。

   /* I had to move position:fixed to this top-level element */
   .panel{
     z-index: 1;
     position: fixed;
   }

2. JavaScript 修改：

   • 获取通知面板的高度。
   • 使用 animate() 方法创建动画，控制 top 属性的变化。
   • 在动画结束后，移除通知面板。

   const panel = document.getElementById('panel');
   const page = document.getElementById('main-page');
   
   function closePanel(){
     const {bottom} = panel.getBoundingClientRect();
     const duration = 1000; // ms
   
     panel.animate(
         { top: [0, `${-bottom}px`] },
       { duration }
     ).finished.then(() => {
       panel.replaceWith(); // Don't forget to remove element from DOM!
     });
   
     page.animate(
       { top: [`${bottom}px`, 0] },
       { duration }
     );
   }

完整代码：

  

    

      
By accessing and using this website, you acknowledge that you have read and
        understand our
        Cookie Policy,
        Privacy Policy, and our
        Terms of Service.
      
      Got it
    
  



  

      @@##@@
      

          
Hello! I'm Dylan Anderton
          
Consult, Design, and Develop Websites
          
Have something great in mind? Feel free to contact me.
 I'll help you to make it happen.
          LET'S MAKE CONTACT
      
  

/* I had to move position:fixed to this top-level element */
.panel{
  z-index: 1;
  position: fixed;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

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

.panel-text{
  display:inline;
}

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

.panel-button{
  display:inline;
  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;
}
}

@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;
}
}

.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;
}

总结

本文针对通知面板上滑动画不流畅的问题，提供了三种优化方案。其中，使用 position: sticky 的方案代码最简洁，且避免了视觉抖动，是推荐的选择。使用 CSS Transitions 和 Web Animations API 的方案，虽然代码相对复杂，但提供了更强大的动画控制能力。开发者可以根据实际需求选择合适的方案。

注意事项：

• 在移除通知面板之前，务必确保动画已经完成。
• 在实现动画效果时，应尽量保持动画的同步性，避免出现视觉上的不协调。
• 在不同的屏幕尺寸下，应测试动画效果，确保其在各种情况下都能正常工作。