点击按钮平移隐藏与显示div（使用translate）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/test.css">
<style>
.content {
position: absolute;
background: gray;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.leftDiv {
float:left;
position:relative;
width: 150px;
height: 80%;
background: pink;
transform: translateX(0);
transition: transform 0.5s;
}
.changeClass {
transform: translateX(-100%);
}
.changeBtn{position:absolute;top:50%;right:-45px;transform:translate(0,-50%);}
</style>
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="content">
<div class="leftDiv" id="leftDiv">
left conternt
<button id="changeBtn" class="changeBtn">切换</button>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".changeBtn").click(function() {
if (!$(".leftDiv").hasClass("changeClass")) {
$(".leftDiv").addClass("changeClass")
} else {
$(".leftDiv").removeClass("changeClass")
}
})
</script>
</body>
</html>如果右边内容跟着移动，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>改变dropdow的click 事件</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/test.css">
<style>
ul {
list-style: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.content {
position: absolute;
/*background: gray;*/
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.leftDiv {
float: left;
position: absolute;
/*position:relative;*/
width: 150px;
height: 20%;
background: pink;
/* top:0;
left:0;*/
transition: transform 0.5s;
}
.toggle .leftDiv {
transform: translate(-150px, 0);
}
.toggle .right-content {
margin-left: 30px;
}
.changeBtn {
position: absolute;
top: 50%;
/*right:-45px;*/
left: 100%;
transform: translate(0, -50%);
width: 25px;
}
.left-content {
overflow: hidden;
white-space: nowrap;
}
.left-content ul li {
height: 35px;
line-height: 35px;
}
.right-content {
margin-left: 180px;
transition: margin-left 0.5s;
}
</style>
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="content">
<div class="leftDiv" id="leftDiv">
<div class="left-content">
<ul>
<li>this is the first line</li>
<li>this is the second line</li>
</ul>
</div>
<button id="changeBtn" class="changeBtn">切换</button>
</div>
<div class="right-content">
<ul>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
<li>this is the first line</li>
<li>this is the second line</li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".changeBtn").click(function() {
if (!$(".content").hasClass("toggle")) {
$(".content").addClass("toggle")
} else {
$(".content").removeClass("toggle")
}
})
</script>
</body>
</html>注意：
css3 transform变换后，原来的位置还占据空间，那是因为 transform并没有让元素脱离标准流； 解决方法: 可以考虑在写了transform属性后,结合position:absolute脱离标准流
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/01/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
