Javascript CSS 3动画在第一次调用时不执行

所以。。。我有这个小网页，有两个div、一个按钮、两个css类和一个javascript函数

这个想法是，当按下按钮时，函数会更改div的css类，并通过一个漂亮的转换将其隐藏。再次按下时，它会执行以下操作：

HTML：

<div id="div1" >
  <div id="div2" >
    Here be HTML stuffs.
  </div>
</div>

以及CSS类：

.visible {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease; 
}
.hidden {
  visibility: hidden;
  opacity: 0;
  height:0;
  overflow: hidden;
  transition: all 1s ease;
}

该按钮只是一个按钮，其函数在不同的div中引用

我现在的问题是，如果div1将“hidden”作为起始类（），它就可以正常工作（所有的转换都按照预期的延迟工作），但是如果起始类是“可见的”，我第一次按下按钮时，div会自动隐藏，忽略转换

我环顾四周，什么也没找到。看来第一个

---

编辑：修复了带有div名称的代码输入错误。

尝试删除Visibly:hidden和Visibly:visible

首先，如果。。。className=='visible'；否则如果。。。className=='hidden'不起作用，因为#div1没有这些类

但在任何情况下，动画的第一轮都不会工作（元素将立即消失）。原因是，在应用.hidden类之前，必须显式设置#div1的高度，该类将高度重置为0，而转换仅在元素的CSS参数发生更改时起作用

在添加.hidden类之前，单击设置高度时也会出现问题-它不会再次转换。这个问题与第三段中描述的问题相似

函数初始化（）{
var div1=document.getElementById（'div1'）；
div1.style.height=div1.clientHeight+'px'；
函数hideNShow（）{
if（div1.className.split（“”）.indexOf（'hidden'）<0）{
div1.className+=“隐藏”；
}
否则{
div1.className=div1.className.replace（/（？：^\s）隐藏（？！\s）/g'）；
}
}
document.getElementById（'switch'）。addEventListener（'click'，hideNShow）；
}
init（）
。平滑{
过渡：所有的1容易；
}
/*.可见{
能见度：可见；
不透明度：1；
过渡：所有的1容易；
}*/
.隐藏{
/*可见性：隐藏*/
高度：0！重要；
不透明度：0；
溢出：隐藏；
/*过渡：所有的1容易*/
}
开关
这里是HTML的东西。
document.getElementById（“div”）.style.height=height+“px”这一行中似乎缺少正确的
id

因为它找不到id=div的元素，所以对div2使用jQuery，而对div1使用纯JS。这很有趣：）你应该有一些默认高度。将

height:auto

添加到

visible

类并检查。而且，默认情况下，您似乎没有任何类。@RobSchmuecker:复制代码时输入错误，对不起@Anarion：不得不说我从其他开发人员那里继承了大部分代码，我正在做一些小改动，所以。。。是啊，这里什么事都有可能发生。。

.visible {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease; 
}
.hidden {
  visibility: hidden;
  opacity: 0;
  height:0;
  overflow: hidden;
  transition: all 1s ease;
}