运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

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

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

本文旨在解决在网页中实现平滑滑出动画时可能出现的白色间隙问题。通过分析问题根源，提供了三种解决方案：利用`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 创建复杂的动画效果。

SONIFY.io SONIFY.io

设计和开发音频优先的产品和数据驱动的解决方案

SONIFY.io 75 查看详情 SONIFY.io

代码示例：

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

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

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



# 是一种 
# 渭南网站建设步骤 
# seo发布文章软件哪个好 
# 徐州网站上排名优化系统 
# 网站url优化实验报告 
# 日本个人网站推广怎么做 
# 优化网站内页关键词排版 
# 淘宝话费充值seo 
# 哪家网站推广的好做些 
# seo各种问题 
# 成都网站建设推广服务好 
# 类似于 
# 网页设计 
# 双击 
# 三种 
# 适用于 
# css 
# 使其 
# 移除 
# 设置为 
# 滑出 
# ai 
# access 
# edge 
# app 
# 浏览器 
# cookie 
# go 
# html 
# java 
# javascript 
 






相关栏目：
    【
        Google疑问12    】
    【
        Facebook疑问10    】
    【
        优化推广96088    】
    【
        技术知识133117    】
    【
        IDC资讯59369    】
    【
        网络运营7196    】
    【
        IT资讯61894    】






相关推荐：
win11讲述人怎么关闭 Win11屏幕朗读辅助功能禁用方法【技巧】 
全球各国上班时间表外贸邮件时间 
C++ virtual析构函数作用_C++基类虚析构函数防止内存泄漏 
Sublime怎么快速复制文件路径_Sublime右键菜单增强技巧 
QQ网站入口直接登录 QQ官方正版登录页面 
实时数据流中高效查找最小值与最大值 
《微信》视频号原创声明开启方法 
《腾讯相册管家》注销账号方法 
豆包AI怎样为教育场景定制答疑逻辑_为教育场景定制豆包AI答疑逻辑方案【方案】 
Go语言中方法接收器的选择：值类型还是指针类型？ 
Go反射进阶：访问内嵌结构体中的被遮蔽方法 
抖音猜你想搜能说明对方搜过吗 
12306APP选座怎么选充电位置_12306APP带充电插座座位选择方法与技巧 
《跳跳舞蹈》循环播放方法 
抖音评论无法发送如何修复 抖音评论功能操作指南 
4399造梦西游3无敌版_4399游戏入口 
苹果11如何更换iCloud账号_苹果11账号切换的具体步骤 
宝妈做视频号该写什么标签话题？宝妈关注的话题有哪些？ 
《雷电模拟器》自动点击设置方法 
哈尔滨城市通昵称修改方法 
b站如何管理订阅_b站订阅标签分类管理 
视频号视频怎么免费保存到相册？保存到相册需要注意什么？ 
如何在vscode中关闭it环境 
Git命令与VS Code UI操作的对应关系解析 
《三国：谋定天下》平民全阶段通用阵容 
b站怎么设置动态仅粉丝可见_b站动态粉丝可见设置方法 
wps文字怎么设置文字环绕图片的方式_wps文字如何设置文字环绕图片方式 
《大周列国志》皇帝律令功能介绍 
《新三国志曹操传》游历事件袁尚突围攻略 
Excel如何快速找到并断开外部数据源链接_Excel外部数据源断开方法 
AO3官方镜像链接 | 最新防走失网址永久收藏 
无人机考证官网 中国民航无人机考证官网登录入口 
PSD转AI文件的简单方法 
《梦想世界：长风问剑录》药师一图流分享 
PHP中动态类名访问的类实例类型提示与静态分析实践 
Python对象引用与属性赋值：理解链表中的行为 
《偃武》甘宁技能详解 
Dagster资产间数据传递与用户配置管理教程 
解决CSS background 属性中 cover 关键字的常见误用 
风神瞳获取全攻略 
rabbitmq 持久化有什么缺点？ 
汽车之家网页版免费登录_汽车之家官网首页直接进入 
告别繁琐SEO！如何使用SyliusSitemap插件自动化生成网站地图，提升搜索引擎排名 
《爱南宁》认证电动车方法 
米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复 
WPS长文档分栏排版不乱方法_WPS分栏+分节符报纸排版教程 
抖音如何进行蓝V认证 抖音企业号申请所需资料与流程 
使用CSS :has() 选择器实现父元素样式控制：从子元素反向应用样式 
Python模块化编程：避免循环导入与共享函数的最佳实践 
《图怪兽》退出登录方法 



		
 2025-10-19

	   

	   

		  	
		  


		  

		  	











	

		

		

		
了解您产品搜索量及市场趋势，制定营销计划

		
同行竞争及网站分析保障您的广告效果

		

			点击免费数据支持
		

	









	

		

			

				

					
提交您的需求，1小时内享受我们的专业解答。

				

				

					

						
						
						
						

							

								

									

										
									

								

							

							

								

									

										
									

								

							

							

								

									

										
									

								

							

							

							

							

								

									
								

							

						

						

							

								
								
								
								
								
							

						

					

				

			

		

	






	

		

			

				
运城市盐湖区信雨科技有限公司

				

				

					运城市盐湖区信雨科技有限公司
				

				

				运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。				

			
				

				

				

					
					
					
					
					
4008744355

				

				

				

				

				

				

					 8156699
				

				

					 13765294890
				

				

					 8156699@qq.com
				

				
			

			

				
服务/方案/案例/支持 

				

				

				    					
产品服务

					  
					
Google推广

					  
					
社交推广

					  
					
网站建设

					  
					
Bing 推广

					  
					
Yandex推广

										

					

				    				

				

				   					
解决方案

					  
					
B2B网站推广

					  
					
B2C电商推广

					  
					
海外品牌推广

					  
					
APP海外推广

										

					

									

				

				   					
营销案例

					  
					
品牌营销推广

					  
					
B2C电商推广

					  
					
B2B海外推广

					  
					
APP应用游戏

					  
					
营销网站案例

										

					

									

				

				   					
营销学院

					  
					
Google疑问

					  
					
Facebook疑问

					  
					
优化推广

					  
					
技术知识

					  
					
IDC资讯

					  
					
网络运营

					  
					
IT资讯

										

					

									

			

			

			    				
关于我们 

				

				

					  
					
公司简介

					  
					
报名培训

					  
					
加入我们

										

					

				

								

				

									

			

		

	





	

		

			

				©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 			

			
		




	






	

		
		

			
		

		

			
		

		

			
		

		

			
		

	












	

        

            
Notice

			
We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.