点击按钮首次显示隐藏容器无过渡，后续点击正常的问题求助

1. 首次点击时，元素的初始transform定义在外部CSS中，你通过JS直接设置内联transform时，浏览器会直接覆盖原有样式，不会触发过渡——因为过渡需要检测到已存在的状态变化过程，首次设置内联样式相当于直接“跳”到新状态。
2. 你仅在myFunction1中给元素添加transition属性，首次调用myFunction时元素还没有过渡样式，自然无动画；后续点击时若myFunction1已执行过，元素有了内联过渡属性，修改transform就会触发动画。

步骤1：修改CSS，用类控制显示状态 #

把过渡属性放到元素默认样式里，新增类来控制显示：

#hidden-div-1 {
  transform: translateY(100%);
  transition: all .5s; /* 提前设置过渡，确保元素始终具备动画能力 */
  background-color: saddlebrown;
  grid-column: col-st 1 / col-nd 6;
  grid-row: 1 / 16;
  z-index: 4;
}

#hidden-div-1.show {
  transform: translateY(0);
}

步骤2：简化JS逻辑，只负责切换类名 #

function myFunction() {
  var x = document.getElementById("hidden-div-1");
  x.classList.toggle("show"); // 一行代码完成显示/隐藏切换
}

function myFunction1() {
  var x = document.getElementById("hidden-div-1");
  x.classList.remove("show"); // 直接移除类回到隐藏状态
}

如果坚持用直接操作样式的方式，需要做两点调整：

1. 在CSS中添加默认过渡属性（和上面一致）
2. 用getComputedStyle获取实际生效的样式，替代x.style.transform的判断：

function myFunction() {
  var x = document.getElementById("hidden-div-1");
  var computedStyle = window.getComputedStyle(x);
  // 注意：不同浏览器返回的transform格式可能不同，matrix(1,0,0,1,0,0)对应translateY(0)
  if (computedStyle.transform === "matrix(1, 0, 0, 1, 0, 0)") {
    x.style.transform = "translateY(100%)";
  } else {
    x.style.transform = "translateY(0)";
  }
}

function myFunction1() {
  var x = document.getElementById("hidden-div-1");
  x.style.transform = "translateY(100%)";
}

注：类名切换的方式更推荐，因为它将样式逻辑和JS交互逻辑分离，代码更清晰，也能避免浏览器兼容性问题。

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