首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >点击按钮平移隐藏与显示div(使用translate)

点击按钮平移隐藏与显示div(使用translate)

作者头像
tianyawhl
发布2019-04-04 10:53:58
3.8K0
发布2019-04-04 10:53:58
举报
文章被收录于专栏:前端之攻略前端之攻略
<!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档