Javascript 移除类上的转换切换

寻找的结果：

• 模式1：当窗口较大（比如>465px）时，TOC项目显示在内容页的左侧
• 模式2：当窗口宽度小于465px时，使用transition减小TOC项的宽度
• 模式3：当窗口的宽度大于465px时，使用转换增加TOC项目的宽度
• 最后，当窗口宽度<465px且TOC由于上述机制而隐藏时，在顶部显示一些文本，用户可以单击。当他们点击此文本时，将TOC项目显示为一个覆盖图。再次单击此文本时，将TOC项目隐藏为覆盖

如何看待我试图解决的问题：

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

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

函数showMenuAsOverlay（调用者）{
var节点=document.getElementById（“toc”）；
node.classList.toggle（'overlay'）；
if（node.classList.contains（'overlay'））
caller.innerHTML=“隐藏目录”；
其他的
caller.innerHTML=“显示目录”；
}

.wrapper{
显示器：flex；
弯曲方向：行；
边框：3倍纯黑；
z指数：-1；
位置：相对位置；
}
.container left{}
#toc{
边框：1px纯绿色；
flex:0自动；
空白：预处理；
z指数：-1；
宽度：150px；
背景色：红色；
过渡：宽度1s放松；
框大小：边框框；
}
.货柜权{
显示器：flex；
边框：1px纯红；
flex 1 1自动；
最大宽度：400px；
背景色：白色；
z指数：-1；
框大小：边框框；
}
.我的图标{
光标：指针；
可见性：隐藏；
}
@媒体
屏幕和屏幕（最大宽度：465px）{
#toc{
宽度：0；
背景颜色：紫色；
过渡：宽度1s放松；
}
#toc.overlay{
z指数：999；
位置：绝对位置；
左：0px；
背景色：青色；
底部：0；
排名：0；
宽度：150px；
过渡：左1秒放松；
}
.我的图标{
能见度：可见；
}
}

显示目录
这是TOC中的一些文本
这是一些内容这是一些内容这是一些更多的内容，这是一次又一次的内容。

当

丢失类

覆盖时，将发生转换

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

    #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;
    }

要应用此规则：

    #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;
    }

这清楚地说明了发生转换的原因。您将从
宽度：150px
转换为
宽度：0
，此转换将从
#toc
：
宽度1s放松；

此外，您还可以在不使用媒体查询的情况下应用此功能：

#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;
}

这意味着无论屏幕大小如何，转换都适用。我认为这不是您想要的。在该块周围放置一个媒体查询，以便仅在您真正需要时应用。
可能会方便地让您的代码片段工作。。。