如何在CSS中使用过渡制作侧边栏滑入效果_transform translate与transition结合-css教程-PHP中文网

如何在CSS中使用过渡制作侧边栏滑入效果_transform translate与transition结合

P粉602998670

发布： 2025-12-01 18:17:02

原创

757人浏览过

侧边栏滑入效果可通过transform与transition实现，首先将侧边栏设为transform: translateX(-100%)隐藏，再通过添加active类使其变为translateX(0)，配合transition实现平滑动画，JavaScript通过切换类名控制显隐，性能好且易于维护。

如何在css中使用过渡制作侧边栏滑入效果_transform translate与transition结合

要在CSS中实现侧边栏滑入效果，可以通过 transform: translate() 配合 transition 属性来完成。这种方式性能好，动画流畅，因为 transform 不会触发页面重排（reflow），只涉及合成层的位移。

基本原理说明

侧边栏默认隐藏在屏幕外（比如左侧或右侧），当用户触发某个操作（如点击按钮）时，通过改变元素的 transform: translateX() 值，将其滑入可视区域。配合 transition 可以让这个移动过程变得平滑。

HTML结构

<div class="sidebar">
  <h3>导航菜单</h3>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</div>
<button id="toggleBtn">展开/收起</button>

登录后复制

CSS样式与过渡设置

使用 transform 将侧边栏初始位置移出屏幕，再通过类名控制其进入视口。

立即学习“前端免费学习笔记（深入）”；

博思AIPPT

博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。

117

查看详情

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #333;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  transform: translateX(-100%); /* 初始状态：完全隐藏在左侧 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}
<p>.sidebar.active {
transform: translateX(0); /<em> 滑入显示 </em>/
}</p>

登录后复制

JavaScript控制显隐

通过JavaScript切换类名来触发动画。

立即学习“前端免费学习笔记（深入）”；

const toggleBtn = document.getElementById('toggleBtn');
const sidebar = document.querySelector('.sidebar');
<p>toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('active');
});</p>

登录后复制