全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-690-7320

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

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

本文旨在解决在网页中实现平滑滑出动画时可能出现的白色间隙问题。通过分析问题根源，提供了三种解决方案：利用`position: sticky`属性、使用css transitions以及web animations api。重点在于确保动画同步，避免视觉上的不流畅感，从而提升用户体验。

在网页开发中，经常需要实现一些动画效果来提升用户体验。其中，滑出动画是一种常见的交互方式，例如在页面顶部显示一个通知面板，用户点击“知道了”按钮后，面板滑出并消失，同时页面主体向上移动以填充面板留下的空间。然而，在实现这种动画时，有时会遇到动画不够平滑，出现白色间隙的问题。本文将深入探讨这个问题，并提供多种解决方案。 ### 问题分析 造成动画不平滑的原因通常在于： 1. **元素定位方式不当：** 使用`position: fixed`虽然能使元素固定在屏幕某个位置，但在不同屏幕尺寸下可能导致元素重叠或出现间隙。 2. **动画不同步：** 如果滑出面板和页面主体向上移动的动画距离和时间不一致，就会出现视觉上的不协调，导致动画不流畅。 为了解决这些问题，我们需要采用更合适的定位方式和更精确的动画控制。 ### 解决方案一：利用 `position: sticky` `position: sticky` 是一种结合了 `position: relative` 和 `position: fixed` 特性的定位方式。当元素在视口中时，它的行为类似于 `position: relative`；当元素滚动到特定位置时，它的行为则类似于 `position: fixed`。 **优点：** * 无需J*aScript计算位置，简化代码。 * 避免了`position: fixed`可能导致的元素重叠问题。 * 动画效果自然流畅，减少视觉抖动。 **代码示例：** ```html

By accessing and using this website, you acknowledge that you h*e read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

Hello! I'm Dylan Anderton

Consult, Design, and Develop Websites

H*e something great in mind? Feel free to contact me.
I'll help you to make it happen.

.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 属性，可以实现同步的动画效果。

代码示例：

<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 h*e 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">
      @@##@@
      <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">H*e 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);
}

代码解释：

  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 提供了更强大的动画控制能力，允许您使用 J*aScript 创建复杂的动画效果。

AI Surge Cloud AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

AI Surge Cloud 87 查看详情 AI Surge Cloud

代码示例：

<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 h*e 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">
      @@##@@
      <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">H*e 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 }
  );
}

代码解释：

  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 提供了更强大的动画控制能力，适用于复杂的动画效果。

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

以上就是实现平滑滑出动画效果：优化页面元素过渡的详细内容，更多请关注其它相关文章！
 
		



# css 
# 使其 
# 聊城seo排名工具 
# 成交量网站建设 
# 坂田网络推广和网站优化 
# 网站为什么要做广告推广 
# 深圳快速网站推广哪里好 
# 海口网站建设发布 
# 建设网站展示 
# 赤峰银川网站推广 
# 外贸企业网站建设找哪家 
# 宁波seo关键词策划 
# 类似于 
# 三种 
# 适用于 
# 单选框 
# 是一种 
# 移除 
# 表单 
# 设置为 
# 滑出 
# ai 
# access 
# edge 
# app 
# 浏览器 
# cookie 
# go 
# html 
# java 
# javascript 
 






相关文章：
12306选座怎么选到商务座_12306商务座选择与配置说明 
漫蛙2正版漫画站 漫蛙2网页版快速访问入口 
处理嵌套交互式控件：前端可访问性指南 
《主播少女的秘密账号迷宫》首支宣传片 
Walmart退货API集成指南：PHP cURL实现与常见问题解析 
如何在离线环境中使用Composer_Composer离线安装依赖包的技巧与策略 
解决J*aScript中重复选择项的确认对话框显示问题 
顺丰快递查询系统 官方正版查询入口 
LINUX怎么设置定时任务_LINUX crontab配置教程 
怎样使用“本地安全策略”提升Windows安全性_Secpol.msc配置指南【高手】 
蛙漫正版漫画平台入口_蛙漫免费阅读全站漫画资源 
mysql通配符支持数字匹配吗_mysql通配符能否用于数字匹配的解析 
晋江读书网页版在线登录 晋江读书电脑版官网 
支付宝碰一碰设备是REDMI手机吗 博主拆机辟谣：处理器、内存都不一样 
J*aScript中如何高效提取对象指定属性 
Kafka Streams中基于消息头条件过滤消息的实现指南 
漫蛙官网正版漫画入口 漫蛙2官方网页登录地址 
Gmail邮箱申请注册直达_Gmail邮箱免费注册PC版官网入口2025 
漫蛙漫画官方主页入口 漫蛙MANWA网页直达访问链接 
Composer的 COMPOSER_PROCESS_TIMEOUT 配置项有什么用_解决因执行时间过长而失败的Composer脚本 
DLsite中文平台入口 DLsite官网内容在线查看 
MAC如何将整个网页截长图_MAC使用Safari的导出为PDF或第三方工具 
Win11 BitLocker密码忘了怎么办 Win11找回BitLocker恢复密钥方法【解决】 
一加 14R 快充无反应_一加 14R 充电优化 
C++如何解决segmentation fault_C++段错误调试与原因分析 
谷歌浏览器最新官方入口链接 谷歌浏览器网页版官网导航 
AO3官方可用镜像 Archive of Our Own网页版最新入口 
手机CPU怎么影响游戏体验_手机CPU对游戏性能的影响分析 
Linux如何构建多环境配置管理_Linux多环境配置方案 
steam官方网页快速访问 steam账号注册全流程 
离线运行Go语言之旅：本地部署与GOPATH配置指南 
J*aScript实现单选按钮与关联输入框的联动禁用教程 
在Runstone环境中高效处理TasteDive API的JSON数据 
QQ邮箱官方网页版登录 QQ邮箱个人邮箱快速访问 
新手怎么开始学化妆 零基础化妆入门教程 
钉钉视频会议声音异常如何处理 钉钉会议音频修复技巧 
J*aScript教程：根据元素文本内容动态设置背景色 
Tabulator表格中精确实现日期时间排序的指南 
Golang并发任务中错误如何聚合_Golang goroutine error收集方式 
大象笔记网页版入口 印象笔记网页版登录入口 
NRF24L01数据传输深度解析：解决大载荷接收异常与分包策略 
Pyrogram与g4f集成：异步编程实践与常见错误解决 
解决Python logging 中 datefmt 导致时间戳固定不变的问题 
J*a 递归快速排序中静态变量的状态管理与陷阱 
汽水音乐车机版8.9下载 汽水音乐车机版8.9版本安装入口 
CSS Box Model与弹性按钮：维持布局稳定的动画实践 
Go语言中的*string：深入理解字符串指针 
Excel组合图表怎么做 Excel创建柱状图与折线组合图教程【图表】 
Tabulator表格日期时间排序问题及自定义解决方案 
QQ邮箱网页版快速登录 QQ邮箱邮箱账号官方入口地址 



		
		

        
 返回目录 在线咨询 

        
   上一篇：使用Python和Selenium自动化捕获新标签页中的网页响应   

            下一篇：如何用css :target制作锚点高亮效果   

      

      

        

          
您的项目需求

          
   

    
    
    
    
      

   


*请认真填写需求信息，我们会在24小时内与您取得联系。

 

      

      

    

  



 


  

    
 ©  广西品丘网络科技有限公司 版权所有    桂ICP备2025075334号 

广西品丘网络科技有限公司
广西品丘网络科技有限公司
广西品丘网络科技有限公司
广西品丘网络科技有限公司
广西品丘网络科技有限公司
广西品丘网络科技有限公司



      联系电话： 400-690-7320   E-mail：info@pinqiuw.cn 

      主营业务：为中小企业及品牌方提供涵盖品牌网络营销、网站 SEO 优化、网站建设、电商方案落地、APP 开发的全链条数字化解决方案。

    
 

    

  





  

    
  





  

    
电话沟通

    
在线客服