【HTML】向右侧展开div

普罗旺斯.

已于 2023-03-06 22:58:10 修改

阅读量537

点赞数

分类专栏：前端文章标签： html

于 2022-03-29 21:33:10 首次发布

本文链接：https://blog.csdn.net/qq_42700109/article/details/123832861

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .userpic {
            position: relative;
        }

        .userinfo {
            position: absolute;
            z-index: 99;
            left: 0;
            top: 0;
        }
        @keyframes go-left {
            0% {
                /* 背景色 */
                background: #000000;
                /* 距离左侧高度 */
                left: 0;
                /* 距离顶部高度 */
                top: 20px;
                /* 元素的不透明级别 */
                opacity: 0
            }
            100% {
                background: #000000;
                left: calc(50% + 20px);
                top: 20px;
                opacity: 3;
            }
        }

        @keyframes go-right {
            0% {
                background: #000000;
                left: calc(50% + 20px);
                top: 20px;
                opacity: 3
            }

            100% {
                background: #000000;
                left: 0;
                top: 20px;
                opacity: 0;
            }
        }

        /* Safari and Chrome */
        /* @-webkit-keyframes go-left {
            0% {
                background: #000000;
                left: 0;
                top:  calc(10vh + 20px);
                opacity: 0
            }
            100% {
                background: #000000;
                left: calc(50% + 20px);;
                top: calc(10vh + 20px);
                opacity: 3;
            }
        }

        @-webkit-keyframes go-right {
            0% {
                background: #000000;
                left: calc(50% + 20px);
                top: calc(10vh + 20px);
                opacity: 0
            }
            100% {
                background: #000000;
                left: 0;
                top: calc(10vh + 20px);
                opacity: 3;
            }
        } */

        .go_left {
            /* 属性为 @keyframes 动画规定名称 */
            animation-name: go-left;
            animation: myfirst 1s normal;
            animation-direction: normal;
            animation-fill-mode: forwards;
            /* Safari and Chrome */
            -webkit-animation-name: go-left;
            -webkit-animation: go-left 3s normal;
            -webkit-animation-direction: normal;
            -webkit-animation-fill-mode: forwards;
        }

        .go_right {
            pointer-events: none;
            animation-name: go-right;
            animation: myfirst 3s normal;
            animation-direction: normal;
            animation-fill-mode: forwards;
            -webkit-animation-name: go-right;
            -webkit-animation: go-right 3s normal;
            -webkit-animation-direction: normal;
            -webkit-animation-fill-mode: forwards;
        }

        .go_display {
            pointer-events: none;
            animation-name: go-right;
            animation: myfirst 3s normal;
            animation-direction: normal;
            animation-fill-mode: forwards;
            -webkit-animation-name: go-right;
            -webkit-animation: go-right 1s normal;
            -webkit-animation-direction: normal;
            -webkit-animation-fill-mode: forwards;
        }
    </style>
</head>

<body>
    <!-- <button id="btn" οnclick="fadeIn()" style="height: calc(10%);width: 10vw;">显示更多</button> -->

    <div style="width: calc(100%-40px); height: calc(100%-40px);margin: 20px;background-color: #0050fc;display: flex;">
        <div class="userpic" style="width: 50vw; height: 50vh; background-color: #ff4a0d;" >
            <button id="btn" onclick="fadeIn()" style="height: calc(10%);width: 10vw;">显示更多</button>
        </div>
        <div class="userinfo sidebar go_display" style="width: 30vw; height: 50vh;" ></div>
    </div>

<script>
    function fadeIn() {
        if (document.querySelector(".sidebar").className.indexOf('go_left') < 0) {
            document.querySelector(".sidebar").className = 'userinfo sidebar';
            document.querySelector(".sidebar").classList.add('go_left');
            document.getElementById("btn").innerText = '收起'
        } else {
            document.querySelector(".sidebar").className = 'userinfo sidebar';
            document.querySelector(".sidebar").classList.add('go_right');
            document.getElementById("btn").innerText = '显示更多'
        }

    }
</script>
</body>

</html>

注意

偶尔可能会遇到动画会把按钮挡住，导致按钮不可以点击，就要添加这个属性 pointer-events

外层（被遮挡的层）{
    pointer-events: none;
}
 
内层（要发生事件的层）{
    pointer-events: auto;
}

pointer-events属性本身有很多取值，但**只有****none和auto**可以用在浏览器上，其他都只能应用在SVG上

取值none：元素永远不会成为鼠标事件的target

取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）

这里不要忘了给内层添加**auto属性，否则被外层包裹的所有内层无法成为鼠标事件的target**了

详解链接

普罗旺斯.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML】向右侧展开div

<html><head> <meta charset="utf-8"> <title></title> <style> .userpic { position: relative; } .userinfo { position: absolute; z-index: 99;
复制链接

扫一扫

专栏目录