# 解决滑动动画不流畅的问题：优化 fixed 元素动画效果的实用指南-html教程-PHP中文网

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

<p>本文旨在解决使用 HTML、CSS 和 JavaScript 创建滑动动画时出现的不流畅问题，特别是当页面顶部固定面板（`position: fixed`）向上滑动消失，同时页面主体向上移动以填充面板空间时，可能出现的动画卡顿或闪烁问题。我们将探讨问题的原因，并提供多种解决方案，包括使用 `position: sticky`、CSS transitions 和 Web Animations API，以实现更平滑、更流畅的动画效果。</p> 在网页开发中，创建流畅的用户体验至关重要。当涉及到动画时，尤其需要注意性能和视觉效果。本文将重点介绍如何解决在使用 HTML、CSS 和 JavaScript 创建滑动动画时可能遇到的不流畅问题，特别是在涉及固定定位（`position: fixed`）元素时。 ### 问题分析当一个固定定位的面板向上滑动消失，同时页面主体向上移动以填充面板空间时，如果动画不同步或计算不精确，可能会出现以下问题： * **空白闪烁**：在动画过程中，页面主体尚未完全填充面板空间时，可能会短暂地显示空白区域。 * **动画卡顿**：由于浏览器渲染性能的限制或动画计算的复杂性，动画可能出现卡顿或掉帧现象。 * **视觉抖动**：在不同屏幕尺寸或设备上，由于像素对齐或计算误差，动画可能出现轻微的抖动。这些问题通常是由于以下原因造成的： * **动画不同步**：面板和页面主体的动画时间和移动距离不一致。 * **不精确的定位**：使用绝对值或魔术数字进行定位，导致在不同屏幕尺寸上出现偏差。 * **过度使用 `position: fixed`**：`position: fixed` 可能会导致布局和渲染上的问题，尤其是在动画中。 ### 解决方案以下是几种解决滑动动画不流畅问题的方案，每种方案都有其优缺点，可以根据具体情况选择最适合的方案。 #### 1. 使用 `position: sticky` `position: sticky` 是一个相对较新的 CSS 属性，它结合了 `position: relative` 和 `position: fixed` 的特性。当元素在视口中滚动到特定位置时，它会变成固定定位，否则保持相对定位。使用 `position: sticky` 的优点是： * **简单易用**：无需 JavaScript 计算，只需 CSS 即可实现。 * **自动适应**：元素会自动适应不同屏幕尺寸和滚动位置。 * **减少抖动**：与 `position: fixed` 相比，`position: sticky` 减少了视觉抖动的可能性。以下是使用 `position: sticky` 的示例代码： ```html <div class="panel" id="panel"> <div class="notif-panel" id="notifPanel"> <div class="panel-content"> <p class="panel-text">By accessing and using this website, you acknowledge that you have read and <span class="brCust" id="brCust"></span>understand our <a class="cookie" href="#">Cookie Policy</a>, <a class="privacy" href="#">Privacy Policy</a>, and our <a class="tos" href="#">Terms of Service</a>. </p> <button class="panel-button" onclick="closePanel()">Got it</button> </div> </div> </div> <div class="main-page" id="main-page"> <section class="hero" id="hero"> <img src="assets/y-logo-white.png" class="logo"> <div class="hero-content"> <p class="name">Hello! I'm Dylan Anderton</p> <h2 class="slogan">Consult, Design, and Develop Websites</h2> <p class="contact-text">Have something great in mind? Feel free to contact me.<br> I'll help you to make it happen.</p> <button class="contact-button">LET'S MAKE CONTACT</button> </div> </section> </div>

.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 的示例代码：

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

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

登录后复制

/* 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 创建复杂的动画效果。

使用 Web Animations API 的优点是：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

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

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

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

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

登录后复制

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

登录后复制

注意事项：