前端侧边栏的滑入滑出效果_vue右侧滑出面板

在使用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.效果图（简简单单）