# 解决滑动动画不流畅的问题：优化 fixed 元素动画效果的实用指南

本文旨在解决使用 html、css 和 javascript 创建滑动动画时出现的不流畅问题，特别是当页面顶部固定面板（`position: fixed`）向上滑动消失，同时页面主体向上移动以填充面板空间时，可能出现的动画卡顿或闪烁问题。我们将探讨问题的原因，并提供多种解决方案，包括使用 `position: sticky`、css transitions 和 web animations api，以实现更平滑、更流畅的动画效果。

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

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

注意事项：

• position: sticky 需要指定 top、right、bottom 或 left 属性才能生效。
• position: sticky 的兼容性不如 position: fixed，需要考虑浏览器兼容性问题。

2. 使用 CSS Transitions

CSS Transitions 允许您在 CSS 属性值发生变化时创建平滑的动画效果。

使用 CSS Transitions 的优点是：

• 简单易用：只需 CSS 即可实现简单的动画效果。
• 性能良好：浏览器可以优化 CSS Transitions 的性能。

以下是使用 CSS Transitions 的示例代码：

  

    

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

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

注意事项：

• 需要精确计算面板的高度，并将其应用于页面主体的 top 属性。
• 确保面板和页面主体的动画时间和缓动函数一致，以实现同步动画效果。
• 需要在动画结束后将面板从 DOM 中移除，以避免影响页面布局。

3. 使用 Web Animations API

Web Animations API 提供了更强大的动画控制能力，允许您使用 JavaScript 创建复杂的动画效果。

AGI-Eval评测社区

AI大模型评测社区

下载

使用 Web Animations API 的优点是：

• 更强大的控制：可以精确控制动画的每个细节，例如关键帧、时间和缓动函数。
• 更高的性能：浏览器可以优化 Web Animations API 的性能。
• 更灵活：可以创建更复杂的动画效果，例如路径动画和变形动画。

以下是使用 Web Animations API 的示例代码：

  

    

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

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

注意事项：

• 需要精确计算面板的高度，并将其应用于页面主体的 top 属性。
• 确保面板和页面主体的动画时间和缓动函数一致，以实现同步动画效果。
• 需要在动画结束后将面板从 DOM 中移除，以避免影响页面布局。
• Web Animations API 的兼容性不如 CSS Transitions，需要考虑浏览器兼容性问题。

总结

解决滑动动画不流畅的问题需要综合考虑多种因素，包括动画的同步性、定位的精确性和性能的优化。选择合适的解决方案取决于具体的需求和场景。

• 如果只需要简单的动画效果，并且对兼容性要求较高，可以使用 CSS Transitions。
• 如果需要更强大的动画控制能力，并且对兼容性要求不高，可以使用 Web Animations API。
• 如果希望避免使用 JavaScript，并且对兼容性要求不高，可以尝试使用 position: sticky。

无论选择哪种方案，都需要仔细测试和优化，以确保在不同屏幕尺寸和设备上都能获得流畅的动画效果。