第一次调用 CSS 3 动画时未执行答案

【问题标题】：CSS 3 animation not executing the first time it is called第一次调用 CSS 3 动画时未执行
【发布时间】：2015-08-12 02:43:56
【问题描述】：

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

这个想法是，当按下按钮时，该函数会更改 div 的 css 类并通过漂亮的过渡隐藏它。当再次按下它时，它会做相反的事情：

HTML：

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

javascript：

hideNShow(){

  var w = $('#div2');
  var height = w.outerHeight();    

  if(document.getElementById("div1").className=="hidden")
      document.getElementById("div1").className="visible";
      document.getElementById("div1").style.height=height + "px";
  } else if (document.getElementById("div1").className=="visible") {
      document.getElementById("div1").className="hidden";
      document.getElementById("div1").style.height=0 + "px";
  }
}

还有 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 已“隐藏”作为起始类 ()，它可以正常工作（所有转换都按预期工作，并具有预期的延迟），但如果起始类是“可见的”，则第一次按下按钮时，div 会自动隐藏，忽略转换。

我环顾四周，一无所获。好像是第一个

编辑：修正了代码中带有 div 名称的拼写错误。

【问题讨论】：

您似乎在document.getElementById("div").style.height=height + "px"; 这一行中缺少正确的id，因为它找不到带有id=div 的元素
您对 div2 使用 jQuery，但为 div1 选择普通 JS。这很有趣:)
你应该有一些默认高度。将height: auto 添加到visible 类并检查。而且默认情况下您似乎没有任何课程..
@RobSchmuecker：复制代码时打错了，对不起！
@Anarion：我得说我从其他开发人员那里继承了大部分代码，我正在做一些小的改动，所以......是的，任何事情都可能发生在这里......

标签： javascript html css

【解决方案1】：

尝试删除可见性：隐藏和可见性：可见

【讨论】：

【解决方案2】：

首先，条件 if ... className=='visible'; else if ... className=='hidden' 不起作用，因为#div1 没有这些类。

但是无论如何第一轮动画都不起作用（元素会立即消失）。原因是您必须在应用 .hidden 类之前明确设置 #div1 的高度，这会将高度重置为 0，而过渡仅在元素更改 CSS 参数时才有效。

在添加 .hidden 类之前，在单击时设置高度也存在问题 - 它不会再次过渡。这个和第三段from here描述的问题很像。

function init () {
    var div1 = document.getElementById('div1');
    div1.style.height = div1.clientHeight + 'px';
    
    function hideNShow(){      
        if (div1.className.split(' ').indexOf('hidden') < 0) {
            div1.className += ' hidden';
        }
        else {
            div1.className = div1.className.replace(/(?:^|\s)hidden(?!\S)/g , '');
        }
    }
    document.getElementById('switch').addEventListener('click', hideNShow);
}
init();

.smooth {
    transition: all 1s ease; 
}

/*.visible {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease; 
}*/

.hidden {
    /*visibility: hidden;*/
    height: 0 !important;
    opacity: 0;
    overflow: hidden;
    /*transition: all 1s ease;*/
}

<button id="switch" style="margin-bottom:20px;">Switch</button>

<div id="div1" class="smooth" style="background:#F9E6C1;">
  <div id="div2" >
    Here be HTML stuffs.
  </div>
</div>

【讨论】：