前端侧边栏的滑入滑出效果

最新推荐文章于 2024-03-19 09:30:24 发布

努力的睿小宝

最新推荐文章于 2024-03-19 09:30:24 发布

阅读量1.7k

点赞数 1

文章标签：前端 javascript css3

本文链接：https://blog.youkuaiyun.com/weixin_44279243/article/details/121152289

版权

本文档介绍如何手写一个简单的原生JavaScript方法，模拟Element-UI的Drawer抽屉功能。通过点击按钮，使div元素在页面上从左侧平稳滑入和滑出。关键在于设置div的定位、动画效果以及通过JavaScript动态改变div的left属性来实现滑动效果。代码简洁易懂，适合初级开发者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element-ui的Drawer抽屉功能时达不到我想要的效果，手写一个原生的方法，实现点击按钮时使得div元素能够在页面滑入滑出。

1.页面元素简单，一个button，一个div即可；

<div>
    <button>滑出</button>
    <div id="containerDiv">container</div>
</div>

2.以下是设置div的简单的样式

重点：a.设置div的定位，并设置left为div的负的宽度；

b.设置动画从左向右平稳滑动，用时0.5s；

#containerDiv {
  margin-top: 10px;
  background-color: rgb(25, 3, 105);
  opacity: 0.85;
  width: 300px;
  height: 500px;
  position: absolute;
  left: -300px;
  color: #fff;
  border-radius: 5px;
  transition: left linear 0.5s;
}

3.给button绑定事件

<button @click="active()">滑出</button>

4.写事件函数

重点：a.先获得button和div元素

b.判断button的内容，滑出需要让div的left为0，并修改button内容；

滑入将div的left改为负的div的宽度，并修改button内容；

active() {
      var Btn = document.querySelector("button");
      var Div = document.querySelector("div#containerDiv");
      if (Btn.innerHTML === "展示") {
        Btn.innerHTML = "收回";
        Div.style.left = "0";
      } else if (Btn.innerHTML === "收回") {
        Div.style.left = "-300px";
        Btn.innerHTML = "展示";
      }
    }

5.效果图（简简单单）