javascript - 删除类切换的过渡-6ren

javascript - 删除类切换的过渡

转载作者：行者123 更新时间：2023-11-27 22:52:44

25

4

搜索结果:

模式 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/

25

4

0

文章推荐： html - 如何在两列内显示容器？

文章推荐： c++ - 重载 << 以输出 map 的 key_type 和 mapped_type

文章推荐： c++ - 访问公共(public)头文件的多个源文件和头文件

文章推荐： javascript - 在 React Js 中过滤 Todo 列表

Android Studio - 加载小部件时出现问题(切换/切换)
我正在尝试创建一个简单的小部件，它只有一个切换按钮，但我的 AVD 模拟器上不断出现错误，提示“加载小部件有问题”。似乎是因为我在小部件布局中添加了开关或切换按钮。为了测试它，我创建了一个新的空
c++ - GLFW 切换 bool 切换
我正在使用 GLFW 进行键盘输入，但处理速度太快，因此我的 bool 开关在一次按下时被更改了 10 次，因为输入是每一帧处理的。我只需要按一次空格键即可切换状态。我当前的代码如下: if (glf
jquery - 切换/切换 div (jQuery)
我希望完成一个相当简单的任务(我希望!) 我有两个 div 标签和一个 anchor 标签，像这样: forgot password? 我希望使用 anchor 标记在两个 div 标记之间切换，
javascript - 切换 SPAN 类以及此 div 切换
我已经尝试了几种不同的方法，但似乎无法弄清楚如何将 span 的类从“die2”切换到“die3”以及将 div 的显示样式从“block”切换到“none”。有人有任何解决方案吗？ (基本上当页面加
flutter - 使用“切换”(Flutter)切换“文本”小部件
我正在尝试制作一个交换小部件，该小部件显示两个不同的文本。激活时，它下面显示一个TextField，顶部是不可见的，而禁用时它上面显示一个Text，而底部是不可见。但是它没有在屏幕上显示任何内容，只是
javascript - 切换 View 不会以 Angular 切换 Controller
我有一个简单的 Angular 应用程序，它使用两个模板和 Controller 。放置两个按钮来切换 View 。它们调用在控件内定义的函数，该函数使用 window.location='' 来切换
javascript - 如何仅使用 javascript 切换/切换 div onclick 的类
我想要一个 div 切换它的类(切换)onclick，然后再次恢复到原来的类 onclick 我的代码是: function myfunc() { //the code over here
jquery悬停动画高度(切换)
我确信这是一个常见问题，我已经尝试了该网站上的许多线程来尝试解决我的问题，但我似乎无法使其正常工作。基本上我有一个子菜单，当父菜单悬停在其上时需要显示该子菜单，但是如果您在加载完成之前将鼠标从菜单项上
JavaScript 切换
我制作了一个 JavaScript 函数来隐藏单击按钮时的链接及其在该函数中的工作 function toggle() { var ele = document.getElement
jquery 切换...跳转到页面顶部
我正在使用我在 JS fiddle 上找到的这个脚本:http://jsfiddle.net/Q4PUw/2/ 当我点击切换链接时，它会切换框并显示它，但是，它会跳回页面顶部，然后我必须再次向下滚动才
共享主机帐户上的 IP 切换
我正在 GoDaddy 上的共享服务器 IP 上构建 Web 应用程序。该应用程序与验证请求服务器 IP 的房地产 API 进行对话。问题是在 GoDaddy 上，我们的 IP 被列为 X，但它实际上
jquery - 单击时更改图标(切换)
我在 jquery 中有一个简单的脚本，可以在时切换 div(显示和隐藏)。被点击(我正在使用 Bootstrap )。 HTML: Advanced search This is t
xcode - 切换 NSWindows
我有两个 NSWindows，其中都有一个 NSPanel。我想在按下按钮时切换窗口。如何才能做到这一点？我不再需要旧窗口，所以我只想显示新窗口。最佳答案要聚焦第二个窗口，只需调用: [windo
javascript - 能够在单击时添加选项但无法将其删除(切换)
我尝试在单击切换时将选项添加到选择菜单，但如果再次单击(取消选择)，则可以将其删除。到目前为止，我可以在单击时向选择菜单添加单个值，但无法将其删除(切换添加切换删除) 这是我的代码: HTML
javascript - 切换
我正在尝试隐藏所属行。例如，如果您单击“子标题 1”，则将仅隐藏项目 1、项目 2 和项目 3 行。示例: title Sub Title 1
使用自定义属性进行 Javascript 切换
似乎无法让它为我工作，任何人都可以为我提供帮助吗？ http://codepen.io/anon/pen/kABjC 这应该根据点击打开和关闭文本部分，它采用 ID #，它只是一个数字(1,2,3,4
vba - 如何防止Excel中的窗口闪烁/切换？
我正在从一个文件复制到另一个文件，并且我可以看到 Excel 在源文件和目标文件之间切换(如闪烁)。我希望宏从源复制并粘贴到目标，而不在文件之间切换(我不想闪烁)。这里我得到了我的 Excel VB
Jquery 切换 Accordion
我正在尝试制作一个带切换功能的 Accordion ，现在看起来效果很好。作为 javascript 的新手，我希望得到一些帮助，那就是它的组合方式。 http://jsfiddle.net/z3wW
Javascript，切换 setInterval
我正在尝试制作一个小脚本，其中屏幕将每 100 毫秒随机更改一次背景颜色，您可以通过按一个按钮来打开和关闭它。我可以让它开始，但我不能让它停止。这是切换的主要代码: var on = -1; fun
jQuery 切换、隐藏和更改类
我确信这里应该已经涵盖了这一点，但我一直无法找到专门涉及此问题的问题。我在一个页面中有 2 个 div，就像这样...... ...content... ...content...

首页

博学

6Ren·AI

商城

javascript - 删除类切换的过渡