html实现平移隐藏,点击按钮平移隐藏与显示div（使用translate）

.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%);}

left conternt

切换

$(".changeBtn").click(function() {

if (!$(".leftDiv").hasClass("changeClass")) {

$(".leftDiv").addClass("changeClass")

} else {

$(".leftDiv").removeClass("changeClass")

}

})

如果右边内容跟着移动，完整代码如下：

改变dropdow的click 事件

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;

}

• this is the first line
• this is the second line

切换

• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line
• this is the first line
• this is the second line

$(".changeBtn").click(function() {

if (!$(".content").hasClass("toggle")) {

$(".content").addClass("toggle")

} else {

$(".content").removeClass("toggle")

}

})

注意：

css3 transform变换后，原来的位置还占据空间，那是因为 transform并没有让元素脱离标准流；

解决方法:

可以考虑在写了transform属性后,结合position:absolute脱离标准流