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