Question

寻找的结果：

模式1：当窗口较大（例如> 465像素）时，目录目录显示在内容页面的左侧
模式2：当窗口的宽度小于465px时，请使用过渡功能减小TOC项目的宽度
模式3：当窗口的宽度大于465px时，请使用过渡来增加TOC项目的宽度
最后，当窗口的宽度<465px并且由于上述机制而隐藏了TOC时，请在顶部显示一些用户可以单击的文本。当他们单击此文本时，将TOC项目显示为覆盖。再次单击此文本时，将TOC项目隐藏为覆盖。

如何看待我试图摆脱的问题：

将窗口增大到较大的宽度，然后又减小到较小的宽度。当您从一个转到另一个时，请查看过渡。很好。
将窗口缩小，以便显示“显示目录”文本。单击文本。 TOC显示为覆盖图。很好然后再次单击以隐藏TOC作为覆盖。青色TOC消失了，但是之后立即播放了过渡。那就是问题所在。我想摆脱这种过渡。

这种行为对我来说没有意义，因为媒体查询指定当窗口<465px时，TOC的宽度为0。所以为什么将其重置为150px对我来说还是一个谜。但是对我来说最重要的是，当移除了作为覆盖层的TOC时（当“覆盖层”类被切换（关闭）时，如何摆脱这种不需要的过渡？

function showMenuAsOverlay(caller) {
    var node = document.getElementById("toc");
    node.classList.toggle('overlay');
    if (node.classList.contains('overlay'))
        caller.innerHTML = "Hide Table of Content";
    else
        caller.innerHTML = "Show Table of Content";
}

.wrapper {
    display: flex;
    flex-direction: row;
    border: 3px solid black;
    z-index: -1;
    position: relative;
}
.container-left {}

#toc {
    border: 1px solid green;
    flex: 0 0 auto;
    white-space: pre;
    z-index: -1;
    width: 150px;
    background-color: red;
    transition: width 1s ease-out;
    box-sizing: border-box;
}
.container-right {
    display: flex;
    border: 1px solid red;
    flex 1 1 auto;
    max-width: 400px;
    background-color: white;
    z-index:-1;
    box-sizing: border-box;
}
.myicon {
    cursor: pointer;
    visibility: hidden;
}
@media
    screen and (max-width: 465px) {
        #toc {
            width: 0;
            background-color: purple;
            transition: width 1s ease-out;
        }
        #toc.overlay {
            z-index: 999;
            position: absolute;
            left: 0px;
            background-color: cyan;
            bottom: 0;
            top: 0;
            width: 150px;
            transition: left 1s ease-out;
        }
        .myicon {
            visibility: visible;
        }
    }

<body>
<div onclick="showMenuAsOverlay(this)" class="myicon" id="myicon">Show Table of Content</div>
<div class="wrapper">
    <div class="container-left" id="toc" data-state="0">This is some text in the TOC</div>
    <div class="container-right">
        This is some content this is some content this is some more content, and this is content again and again.
    </div>
</div>
</body>

Answer 1

当<div id="toc">失去班级overlay时，就会发生过渡。

这意味着您不再应用此规则：

    #toc.overlay {
        z-index: 999;
        position: absolute;
        left: 0px;
        background-color: cyan;
        bottom: 0;
        top: 0;
        width: 150px;
        transition: left 1s ease-out;
    }

要应用此规则：

    #toc {
        width: 0;
        background-color: purple;
        transition: width 1s ease-out;
    }

这很清楚为什么会发生过渡。您将从width: 150px到width: 0，并且此过渡从#toc开始应用：width 1s ease-out;

此外，您无需媒体查询即可应用此功能：

#toc {
    border: 1px solid green;
    flex: 0 0 auto;
    white-space: pre;
    z-index: -1;
    width: 150px;
    background-color: red;
    transition: width 1s ease-out;
    box-sizing: border-box;
}

这意味着转换会应用任何屏幕尺寸。我认为那不是你想要的。在该块周围放置一个媒体查询，以便仅在您确实需要时才应用。

删除类切换上的过渡

1 个答案: