CSS中transition: all .2s ease设置后侧边栏过渡效果不生效如何解决

问题排查与修复方案 #

导致过渡不生效的核心原因如下：

• 缺失boxicons图标库引入：代码中使用了bx bx-menu的图标类，没有引入对应资源的话，<i>标签无实际宽高，无法触发点击事件，看起来就像过渡未生效
• .nav-toggle未定义初始定位值：仅在侧边栏激活状态下给了.nav-toggle的top:0、right:0属性，初始状态未定义这两个值，transition无法计算过渡起始值，会出现跳变
• 未给根元素设置高度：侧边栏用了height:100%，如果html、body未设置高度100%，会导致侧边栏高度计算异常，可能影响过渡效果
• CSS自定义变量未定义：代码中使用了var(--secondary-color)，如果没有在:root里定义这个变量，侧边栏背景为透明，可能看不到过渡过程

修正后的HTML代码 #

<!-- 引入boxicons图标库，放在head标签内 -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<body>
    <section class="side-bar" id="side-bar">
        <div class="nav-toggle">
            <i class='bx bx-menu' id="menu-on" ></i>
        </div>
    </section>
    <script src="js/home.js"></script>
</body>

修正后的CSS代码 #

:root{
    --secondary-color: #2c3e50; /* 可替换为自定义侧边栏颜色 */
}
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.nav-toggle{
    position: absolute;
    width: 20%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease;
    transition-delay: .2s;
    /* 新增初始定位值 */
    top: 0;
    left: 0;
}
.nav-toggle i{
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}
.side-bar.active-side-bar .nav-toggle{
    top: 0;
    right: 0;
    /* 激活状态关闭left定位，避免属性冲突 */
    left: auto;
}
.side-bar{
    width: 5%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    background: var(--secondary-color);
    z-index: 100;
    transition: all .2s ease;
}
.side-bar.active-side-bar{
    width: 20%;
}

JS代码逻辑无问题可直接复用 #

let navBar=document.querySelector('.side-bar');
let navOn=document.querySelector('#menu-on');

navOn.addEventListener('click', function(event){
    navBar.classList.toggle('active-side-bar');
});

内容的提问来源于stack exchange，提问作者jlassi fourat