实现平滑滑出动画效果：优化页面元素过渡

本文旨在解决在网页中实现平滑滑出动画时可能出现的白色间隙问题。通过分析问题根源，提供了三种解决方案：利用`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，需要进行兼容性处理。

解决方案二：使用 CSS Transitions

CSS Transitions 允许您在 CSS 属性值发生变化时，平滑地过渡到新的值。通过精确控制滑出面板和页面主体的 top 属性，可以实现同步的动画效果。

代码示例：

  

    

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

代码解释：

1. 获取面板高度： 使用 panel.getBoundingClientRect() 获取面板的尺寸和位置信息。
2. 设置初始位置： 将面板的 top 属性设置为 0，并将页面主体的 top 属性设置为面板的高度，使其紧贴面板下方。
3. 添加过渡效果： 为面板和页面主体添加 transition 属性，指定过渡的属性（top）、持续时间（1s）和缓动函数（ease-in-out）。
4. 触发动画： 使用 setTimeout 延迟一段时间后，将面板的 top 属性设置为 -rectPanel.bottom + "px"，使其向上滑出，同时将页面主体的 top 属性设置为 0，使其向上移动填充面板留下的空间。
5. 移除DOM元素: 在动画结束后，将面板从DOM中移除，避免影响页面布局。

注意事项：

• 确保面板和页面主体的过渡时间和缓动函数一致，以实现同步的动画效果。
• 使用 setTimeout 延迟触发动画，可以避免浏览器优化导致的动画卡顿。

解决方案三：使用 Web Animations API

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

a0.dev

专为移动端应用开发设计的AI编程平台

下载

代码示例：

  

    

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

代码解释：

1. 获取面板高度： 与 CSS Transitions 方案相同，首先获取面板的高度。
2. 创建动画： 使用 panel.animate() 和 page.animate() 创建动画对象，指定动画的属性（top）、起始值和结束值，以及动画的持续时间。
3. 移除DOM元素: 使用 finished.then() 监听面板动画的结束，并在动画结束后将面板从DOM中移除。

注意事项：

• Web Animations API 提供了更多的动画控制选项，例如缓动函数、循环次数、延迟等。
• 可以使用 keyframe format 指定属性值在不同时间点的变化。

总结

本文介绍了三种解决滑出动画不平滑问题的方法：使用 position: sticky、CSS Transitions 和 Web Animations API。每种方法都有其优缺点，您可以根据实际需求选择最合适的方案。

• position: sticky 最简单易用，但可能存在兼容性问题。
• CSS Transitions 适用于简单的动画效果，代码简洁易懂。
• Web Animations API 提供了更强大的动画控制能力，适用于复杂的动画效果。

无论选择哪种方案，都需要确保动画同步，避免视觉上的不协调，从而提升用户体验。此外，还应注意代码的兼容性，确保在不同浏览器下都能正常运行。