javascript - 如何使用 javascript 和 css 为高度变化设置动画？

Question

我有这张图片，点击时会显示出来，但我希望有一个 1 秒左右的过渡动画。

我不想使用 jQuery。移动友好的 CSS 解决方案会很棒。

有什么想法吗？

#cover {
  height: 100px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
#image {
  width: 100%;
  display: block;
}

<div class="cover" id="cover">
  <img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
  var isOpen = false;

  function myFunction() {
    var image = document.getElementById('image');
    var cover = document.getElementById('cover');
    if (isOpen === false) {
      cover.setAttribute("style", "height:" + image.offsetHeight + "px");
      isOpen = true;
    } else if (isOpen !== false) {
      cover.setAttribute("style", "height:100px");
      isOpen = false;
    }
  }
</script>

Answer 1

您只需添加 transition: height 1s 即可获得一秒钟的动画:

#cover {
  height: 100px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  -webkit-transition: height 1s; 
  -moz-transition: height 1s; 
  -ms-transition: height 1s; 
  -o-transition: height 1s; 
  transition: height 1s;  
}
#image {
  width: 100%;
  display: block;

}

<div class="cover" id="cover">
  <img src="http://lorempixel.com/500/500/cats/" onclick="myFunction()" id="image" />
</div>
<script>
  var isOpen = false;

  function myFunction() {
    var image = document.getElementById('image');
    var cover = document.getElementById('cover');
    if (isOpen === false) {
      cover.setAttribute("style", "height:" + image.offsetHeight + "px");
      isOpen = true;
    } else if (isOpen !== false) {
      cover.setAttribute("style", "height:100px");
      isOpen = false;
    }
  }
</script>