JavaScript 动画隐藏元素使用 jquery

Question

在我正在构建的网站中，我在另一个 div 中有一个 div。单击 header 时，内部 div 应该 dissapear/reappear。但是只改变不透明度和高度是很丑陋的，所以我想添加一些动画，这样内部 div 不会突然出现，而是 "creates" 所需的 space 在外部 div（带动画）同时又出现了（带动画）。我怎样才能做到这一点？

$("#d1H").click(function() {
  var element = document.getElementById("d2");
  if(element.style.opacity == "0") {
    element.style.opacity = "1";
    element.style.height = "auto";
  }
  else{
    element.style.opacity = "0";
    element.style.height = "0";
  }
});

#d1{
  border: 2px solid #333;
}
#d2{
  border: 2px solid #000;
  margin: 1rem;
}
#placeholder{
  height: 100px;
}

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="d1">
  <h1 id="d1H">This is the outer div.</h1>
  <div id="d2">
    <h1">This is the inner div.</h1>
    <div id="placeholder"></div>
  </div>
</div>

Answer 1

您可以使用 CSS 属性转换，它确定更改 CSS 属性所需的时间量。就像一个简单的例子，让一切都转变，把这个添加到你的 CSS:

* {
transition: 1s;
}

您也可以使用特定属性来执行此操作。给出了一些例子 here

Answer 2

如果您使用jQuery，您可以使用.fadeIn()/.fadeOut() or .fadeToggle()。

    $("#d1H").click(function() {
          $("#d2").fadeToggle();
    });

JavaScript 动画隐藏元素使用 jquery

JavaScript animation hide element using jquery

html

javascript

jquery

animation

transition