javascript - 删除类切换的过渡

标签 javascript html css

搜索结果:

  • 模式 1:当窗口较大(例如 >465px)时,TOC 元素显示在内容页面的左侧
  • 方式二:当窗口宽度小于465px时,使用transition缩小TOC项的宽度
  • 方式三:当窗口的宽度大于 465px 时,使用过渡增加 TOC 项的宽度
  • 最后,当窗口的宽度 < 465px 并且 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>

最佳答案

转换发生在 <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;
}

这意味着转换适用任何屏幕尺寸。我不认为那是你想要的。在该 block 周围放置一个媒体查询,以便仅在您真正需要时应用。

关于javascript - 删除类切换的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58581022/

相关文章:

javascript - Bootstrap模态新页面

javascript - Angularjs PHP $http 并用数据填充 Controller 中的 $scope

html - 如果值存在或不存在,如何添加固定下划线?

javascript - 如何为 div 中的所有元素设置点击处理程序

html - 缩小屏幕尺寸时保持边距?

javascript - 如何使文本框只接受 0-10 之间的数字,并且只接受小数部分的 0.5?

javascript - 使用 expo : ‘react-navigation does not exist in the haste module map’ react native

javascript - 使用 Spring MVC 时如何在不刷新整个页面的情况下重新加载 HTML 表格

javascript - 在屏幕调整大小时将 Div 居中

jquery - 在流体布局上用 jquery 替换背景大小