html - 调整窗口大小时文本对齐过渡

Question

我有这个移动导航（按整页并调整窗口大小以查看导航打开时的效果）：

let responsiveNav = document.getElementById("responsiveNav");
    let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");

    function openResponsiveNav() {
        responsiveNav.style.right = "0";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
        responsiveNavDarkBackground.style.zIndex = "9998";
    }

    function closeResponsiveNav() {
        responsiveNav.style.right = "-100%";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
        responsiveNavDarkBackground.style.zIndex = "-1";
    }

    window.onclick = function(event) {
        if (event.target === responsiveNavDarkBackground) {
            closeResponsiveNav();
        }
    }

* {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }

        .bi-list {
            font-size: 50px;
            float: right;
            cursor: pointer;
        }

        /* Navigation */



        /* Mobile Version */

        #responsiveNavDarkBackground {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            background: rgba(0,0,0,0);
            z-index: -1;
            transition: all 0.5s;
        }

        #responsiveNav {
            position: fixed;
            right: -100%;
            top: 0;
            z-index: 9999;
            height: 100%;
            width: 100%;
            background: #F5C152;
            transition: all 0.5s;
        }

        #responsiveNavHeader {
            background: #fff;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
        }

        #responsiveNav #responsiveNavHeader img {
            height: 35px;
        }

        #responsiveNavHeader #closeResponsiveNav {
            font-size: 25px;
            cursor: pointer;
        }

        #responsiveNav ul {
            list-style: none;
            text-align: center;
        }

        #responsiveNav ul li {
            font-size: 1.2em;
            padding: 1em;
            transition: all 0.1s;
            color: #fff;
        }

        #responsiveNav ul li:hover {
            background: #c69943;
            cursor: pointer;
        }

        #responsiveNav ul li:active {
            background: #a78139;
            cursor: pointer;
        }



        /* Desktop Version */

        @media screen and (min-width: 600px){
            #responsiveNavDarkBackground {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                background: rgba(0,0,0,0);
                z-index: -1;
                transition: all 0.5s;
            }

            #responsiveNav {
                position: fixed;
                right: -600px;
                top: 0;
                z-index: 9999;
                height: 100%;
                width: 400px;
                background: #F5C152;
                box-shadow: 0 0 15px 10px #5d5d5d;
                transition: all 0.5s;
            }

            #responsiveNavHeader {
                background: #fff;
                padding: 1em;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
            }

            #responsiveNav #responsiveNavHeader img {
                height: 35px;
            }

            #responsiveNavHeader #closeResponsiveNav {
                font-size: 25px;
                cursor: pointer;
            }

            #responsiveNav ul {
                list-style: none;
                text-align: right;
                transition: all 0.3s;
            }

            #responsiveNavul:hover > li {
                width: 0;
            }

            #responsiveNav ul li {
                font-size: 1.2em;
                padding: 1em;
                transition: all 0.1s;
                color: #fff;
            }

            #responsiveNav ul li:hover {
                background: #c69943;
                cursor: pointer;
            }

            #responsiveNav ul li:active {
                background: #a78139;
                cursor: pointer;
            }
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <i class="bi bi-list" onclick="openResponsiveNav();"></i>

<div id="responsiveNavDarkBackground">
    <div id="responsiveNav">
        <div id="responsiveNavHeader">
            <h1>Menu</h1>
            <i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
        </div>

        <ul>
            <li class="responsiveNavItem">Home</li>
            <li class="responsiveNavItem">Menu</li>
            <li class="responsiveNavItem">Our Story</li>
            <li class="responsiveNavItem">Contact Us</li>
        </ul>
    </div>
</div>

一切都很完美，但有一个问题，那就是文本对齐。如果导航在大屏幕上并且在右侧，那么它会获得一个text-align: right;属性。如果屏幕较小并覆盖整个屏幕，则它会得到一个text-align: center;. 我怎样才能使它在我调整屏幕大小时文本对齐有一个过渡？

在这个问题因双重原因被标记之前，我已经看到了这个问题：Is it possible to transition text-alignment using CSS3 only？，但没有帮助

标签： htmlcssnavigationcss-transitionstext-align

Answer 1

链接的答案是您所需要的，但需要添加：direction: rtl;因此文本向左溢出并用 span 包装元素以避免混淆悬停效果。

let responsiveNav = document.getElementById("responsiveNav");
    let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");

    function openResponsiveNav() {
        responsiveNav.style.right = "0";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
        responsiveNavDarkBackground.style.zIndex = "9998";
    }

    function closeResponsiveNav() {
        responsiveNav.style.right = "-100%";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
        responsiveNavDarkBackground.style.zIndex = "-1";
    }

    window.onclick = function(event) {
        if (event.target === responsiveNavDarkBackground) {
            closeResponsiveNav();
        }
    }

* {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }

        .bi-list {
            font-size: 50px;
            float: right;
            cursor: pointer;
        }

        /* Navigation */

        #responsiveNavDarkBackground {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            background: rgba(0,0,0,0);
            z-index: -1;
            transition: all 0.5s;
        }

        #responsiveNav {
            position: fixed;
            right: -100%;
            top: 0;
            z-index: 9999;
            height: 100%;
            width: 100%;
            background: #F5C152;
            transition: all 0.5s;
        }

        #responsiveNavHeader {
            background: #fff;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
        }

        #responsiveNav #responsiveNavHeader img {
            height: 35px;
        }

        #responsiveNavHeader #closeResponsiveNav {
            font-size: 25px;
            cursor: pointer;
        }

        #responsiveNav ul {
            list-style: none;
            text-align: right;
        }

        #responsiveNav ul li {
            font-size: 1.2em;
            padding: 1em;
            transition: all 0.1s;
            color: #fff;
        }

        #responsiveNav ul li:hover {
            background: #c69943;
            cursor: pointer;
        }

        #responsiveNav ul li:active {
            background: #a78139;
            cursor: pointer;
        }
        .responsiveNavItem > span{
          display: inline-block;
          text-align: center;
          white-space: nowrap;
          width: 100%;
          overflow: visible;
          direction: rtl;
          transition: all 1.5s ease;
        }

        @media screen and (min-width: 600px){
        .responsiveNavItem > span{
          width: 0;
        }
            #responsiveNavDarkBackground {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                background: rgba(0,0,0,0);
                z-index: -1;
                transition: all 0.5s;
            }

            #responsiveNav {
                position: fixed;
                right: -600px;
                top: 0;
                z-index: 9999;
                height: 100%;
                width: 400px;
                background: #F5C152;
                box-shadow: 0 0 15px 10px #5d5d5d;
                transition: all 0.5s;
            }

            #responsiveNavHeader {
                background: #fff;
                padding: 1em;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
            }

            #responsiveNav #responsiveNavHeader img {
                height: 35px;
            }

            #responsiveNavHeader #closeResponsiveNav {
                font-size: 25px;
                cursor: pointer;
            }

            #responsiveNav ul {
                list-style: none;
                /*text-align: right;*/
                transition: all 0.3s;
            }

            #responsiveNavul:hover > li {
                width: 0;
            }

            #responsiveNav ul li {
                font-size: 1.2em;
                padding: 1em;
                transition: all 0.1s;
                color: #fff;
            }

            #responsiveNav ul li:hover {
                background: #c69943;
                cursor: pointer;
            }

            #responsiveNav ul li:active {
                background: #a78139;
                cursor: pointer;
            }
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <i class="bi bi-list" onclick="openResponsiveNav();"></i>

<div id="responsiveNavDarkBackground">
    <div id="responsiveNav">
        <div id="responsiveNavHeader">
            <h1>Menu</h1>
            <i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
        </div>

        <ul>
            <li class="responsiveNavItem"><span>Home</span></li>
            <li class="responsiveNavItem"><span>Menu</span></li>
            <li class="responsiveNavItem"><span>Our Story</span></li>
            <li class="responsiveNavItem"><span>Contact Us</span></li>
        </ul>
    </div>
</div>