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

最新推荐文章于 2022-11-11 10:37:01 发布

weixin_33826609

最新推荐文章于 2022-11-11 10:37:01 发布

阅读量1.1k

点赞数

文章标签： javascript c# python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1605213

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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脱离标准流

转载于:https://my.oschina.net/u/2612473/blog/1605213