In what cases are CSS transitions removed?-CodePudding

I'm pretty new to Javascript, and I have a webpage I'm trying to make that uses the same HTML file, and just cross-fades content instead of redirecting to new pages. I'm using event listeners to know when the current page has faded out and that triggers the new page to come in. Why is it that in the example below, the new pages don't fade in slowly (they just appear suddenly, ignoring the transition property)? Why is the content no longer responding to the CSS transition?

Edit: I'll try to clarify what I'm asking here. I'm aware that the display feature cannot be transitioned, and that's actually why I'm using the event listener at all. I'm trying to make it so that when the content of one page fades out, the next one fades in in the same place, which I believe cannot be achieved with visibility.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        
        <!-- CSS -->
        <style>
            /* navagation bar style */
            #navbar {
                overflow: hidden;
                background-color: #000000;
                text-align: center;
                width: 100%;
                height: 36px;
            }
            #navbar a {
                display: inline-block;
                color: #ffffff;
                padding: 10px 15px 10px 15px;
                font-size: 16px;
            }
            /* content style*/
            .page {
                padding: 50px;
                text-align: center;
                transition: opacity 1s;
            }
        </style>
        
        <!-- Javascript -->
        <script>
            window.onload = function() {setup()};

            function setup() {
                var page1link = document.getElementById("page1link");
                var page1 = document.getElementById("page1");
                page1.style["opacity"] = "1";

                var page2link = document.getElementById("page2link");
                var page2 = document.getElementById("page2");
                page2.style["opacity"] = "0";
                page2.style["display"] = "none";

                var page3link = document.getElementById("page3link");
                var page3 = document.getElementById("page3");
                page3.style["opacity"] = "0";
                page3.style["display"] = "none";

                page1link.onclick = function() {fade(page1, page2, page3)};
                page2link.onclick = function() {fade(page2, page1, page3)};
                page3link.onclick = function() {fade(page3, page1, page2)};
            }

            function fade(page_1, page_2, page_3) {
                let on_page;
                if (page_2.style["opacity"] != "0") {
                    on_page = page_2
                } else if (page_3.style["opacity"] != "0") {
                    on_page = page_3
                } if (on_page != undefined) {
                    on_page.addEventListener('transitionend', fadePageIn)
                    on_page.style["opacity"] = "0";
                    function fadePageIn() {
                        on_page.style["display"] = "none";
                        page_1.style["display"] = "";
                        page_1.style["opacity"] = "1";
                        on_page.removeEventListener('transitionend', fadePageIn);
                    }
                }
            }
        </script>
        <title>Example</title>
    </head>
    <body>
        <div id="navbar">
            <a id="page1link" href="javascript:void(0)">Page 1</a>
            <a id="page2link" href="javascript:void(0)">Page 2</a>
            <a id="page3link" href="javascript:void(0)">Page 3</a>
        </div>
        <div class="page" id="page1">
            page 1 content here
        </div>
        <div class="page" id="page2">
            page 2 content here
        </div>
        <div class="page" id="page3">
            page 3 content here
        </div>
    </body>
</html>

CodePudding user response：

You can't animate the display property. So when you set opacity and display at the same time, the opacity will transition but the display value changes immediately.

As an alternative, the visibility property can be animated. Interpolation between its values happens at the halfway point, so if you want to make it work with transition that might complicate things. But I've had success in the past using CSS animations to change opacity and visibility at the same time. Using animations like this:

@keyframes becomeVisible {
      0% { visibility: visible; }
    100% { visibility: visible; }
}
@keyframes becomeHidden {
      0% { visibility: visible; }
    100% { visibility: visible; }
    100% { visibility: hidden; }
}


@keyframes fadein {
      0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeout {
      0% { opacity: 1; }
    100% { opacity: 0; }
}