使用JavaScript修改导航栏宽度时无法正常添加过渡效果问题求助

你遇到的过渡仅第一次生效的核心原因是：CSS transition 仅支持两个固定长度值之间的属性过渡，无法对fit-content、auto这类动态计算的宽度值触发过渡动画。

• 第一次点击复选框时，导航栏从初始固定宽度100px过渡到固定宽度300px，符合过渡触发条件，因此效果正常
• 取消勾选时，导航栏从固定宽度300px切换到动态值fit-content，没有明确的可计算的过渡起止值，因此动画失效

方案1：固定收起状态宽度（最简单适配现有代码） #

直接把收起状态的宽度也设置为你初始的固定值100px即可，修改JS代码的else分支：

function change() {
  var nav = document.getElementById("navbar");
  var checkBox = document.getElementById("checkbox");
  if (checkBox.checked == true) {
    nav.style.width = "300px";
  } else {
    // 替换fit-content为固定像素值
    nav.style.width = "100px";
  }
}

方案2：适配动态内容宽度 #

如果你确实需要收起状态下宽度适配内容，可以改用max-width实现过渡，不用修改宽度属性：

修改CSS #

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 宽度一直设为fit-content适配内容 */
  width: fit-content;
  /* 用max-width控制展开收起，初始收起状态最大宽度100px */
  max-width: 100px;
  height: 100%;
  transition: 0.3s;
  box-shadow: rgba(136, 165, 191, 0.26) 4px 2px 10px 0px, rgba(255, 255, 255, 0.8) -4px -2px 16px 0px;
}
nav input {
  margin: 10px;
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0;
  cursor: pointer;
}

修改JS #

function change() {
  var nav = document.getElementById("navbar");
  var checkBox = document.getElementById("checkbox");
  if (checkBox.checked == true) {
    // 展开时设置一个大于你预期最大导航宽度的值即可
    nav.style.maxWidth = "300px";
  } else {
    nav.style.maxWidth = "100px";
  }
}

两种方案都可以实现每次点击都触发平滑过渡效果。

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