Removing a transition on a class toggling

user_1794325 0
Viewed 44

Result looked for:

  • MODE 1: when the window is large (say >465px) the TOC items is displayed to the left of the content page
  • MODE 2: when the window's width gets smaller than 465px, reduce the width of the TOC item using transition
  • MODE 3: when the window's width gets greater than 465px, increase the width of the TOC item using a transition
  • finally, when the window's width < 465px and that the TOC is therefore hidden as a result of the mechanism described above, show some text on top that users can click on. When they click on this text, display the TOC item as an overlay. When you click on this text again, hide the TOC item as an overlay.

How to see the problem I try to get rid of:

  • increase the window to a large width and then back to small width. See the transitions when you go from one to the other. This is good.
  • make the window small so that the "Show Table of Content" text shows up. Click on the text. The TOC is displayed as an overlay. This is good. Then click again, to HIDE the TOC as an overlay. The cyan TOC disappears, but a transition is played right after. That's the problem. I want to get rid of this transition.

This behavior doesn't make sense to me, because the media query specifies that when the window < 465px the width of the TOC is 0. So why it is reset to 150px is a mystery to me. But the most important for me is, how do I get rid of this unwanted transition when the TOC as an overlay is removed (when the the 'overlay' class is toggled (off)?

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>

css html javascript
1 Answers

The transition is happening when <div id="toc"> loses the class overlay.

That means you go from applying this rule:

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

to applying this rule:

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

This makes it clear why the transition is happening. You're going from width: 150px to width: 0 with this transition applied from #toc: width 1s ease-out;

Also, you've got this applied without a media query:

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

This means the transition applies whatever the screen size. I don't think that's what you want. Put a media query around that block to only apply when you really want it to.

user_20718070
Related