时间戳

首页 > 解决方案 > 在什么情况下会移除 CSS 过渡？

javascript - 在什么情况下会移除 CSS 过渡？

问题描述

我对 Javascript 还是很陌生，我正在尝试制作一个使用相同 HTML 文件的网页，并且只是交叉淡化内容而不是重定向到新页面。我正在使用事件侦听器来了解当前页面何时淡出并触发新页面进入。为什么在下面的示例中，新页面不会慢慢淡入（它们只是突然出现，忽略过渡属性）？为什么内容不再响应 CSS 过渡？

编辑：我会试着澄清我在这里问什么。我知道该display功能无法转换，这实际上就是我使用事件侦听器的原因。我正在努力做到这一点，当一页的内容淡出时，下一页淡入同一个地方，我相信这是无法实现的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>

标签： javascripthtmlcss

解决方案

您不能为display属性设置动画。因此，当您同时设置opacity和display时，opacity将转换但display值会立即更改。

作为替代方案，visibility可以为属性设置动画。它的值之间的插值发生在中间点，所以如果你想让它使用transition它可能会使事情复杂化。但我过去曾成功使用 CSS 动画同时进行opacity更改visibility。使用这样的动画：

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

推荐阅读