为什么“过渡：所有 .2s 都轻松”在 css 中不起作用答案

【问题标题】：Why does 'transition : all .2s ease, ' in css not working为什么“过渡：所有 .2s 都轻松”在 css 中不起作用
【发布时间】：2021-10-26 12:18:27
【问题描述】：

所以我用 html、css 和 js 创建了这个侧栏，想法是在单击菜单按钮时增加侧栏的宽度。问题是当我尝试向任何侧边栏元素添加过渡持续时间或延迟时，它不起作用：这是我的 HTML：

<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：

.nav-toggle{
    position: absolute;
    width: 20%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease;
    transition-delay: .2s;
}
.nav-toggle i{
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}
.side-bar.active-side-bar .nav-toggle{
    top: 0;
    right: 0;
}
.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');
});

谢谢大家。

【问题讨论】：

什么是navBar？您的代码未显示您初始化该变量的位置。
请确保示例是minimal reproducible example？
它工作正常 - 只要有东西可以点击。图标来自哪里，它看起来像什么，是否足够大以至于可以点击？请提供一个有效的sn-p代码，我们可以自己尝试查看问题。

标签： javascript html css css-transitions

【解决方案1】：

这似乎对我有用：

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

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

:root {
  --secondary-color: #ff0000
}

.nav-toggle  {
  position: absolute;
  width: 20%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .2s ease;
  transition-delay: .2s;
}

.nav-toggle i {
  font-size: 2rem;
  color: #ffffff;
  cursor: pointer;
}

.side-bar.active-side-bar .nav-toggle {
  top: 0;
  right: 0;
}

.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%;
}

<body>
  <section class="side-bar" id="side-bar">
    <div class="nav-toggle">
      <i class='bx bx-menu' id="menu-on">></i>
    </div>
  </section>
</body>

【讨论】：