html - 创建一个打开/关闭滑动动画 div

Question

我正在尝试制作一个简单的滑动 div，它随一个按钮出现，随另一个按钮消失。问题是，如果我删除关闭的 css，我就可以让它出现，它让打开工作。我已经注释掉了阻止 openImage 工作的代码。如果有人可以看看这个并知道我哪里出错了，那就太好了。

提前致谢。

function closeImage() {
  document.getElementById("main-image").className = "closed";
}

function openImage() {
  document.getElementById("main-image").className = "open";
}

.closed {
  height: 0;
  overflow: hidden;
  background: red;
  //oz-animation: slide 1s backwards;
  //ebkit-animation: slide 1s backwards;
  //-animation: slide 1s backwards;
  //s-animation: slide 1s backwards;
  //imation: slide 1s backwards;
}

.open {
  height: 0;
  overflow: hidden;
  background: red;
  -moz-animation: slide 1s forwards;
  -webkit-animation: slide 1s forwards;
  -o-animation: slide 1s forwards;
  -ms-animation: slide 1s forwards;
  animation: slide 1s forwards;
}

@-moz-keyframes slide
/* Firefox */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@-webkit-keyframes slide
/* Safari and Chrome */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@-o-keyframes slide
/* Opera */

{
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}

@-ms-keyframes slide
/* IE10 */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@keyframes slide {
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

<div id="main-image" class="closed"></div>
<button onclick="openImage();">Open Div</button>
<button onclick="closeImage();">Close Div</button>

Answer 1

只需使用 css 转换

#main-image {
    height: 0px;
    overflow: hidden;
    background: red;
    transition: height 1s;
}

#main-image.open {
    height: 300px;
}