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

Question

我试图制作一个简单的滑动div，它带有一个按钮，然后与另一个按钮消失。问题是我可以只是让它出现，如果我删除css关闭它让开放工作。我已经注释掉阻止openImage工作的代码。如果有人可以看看这个，并知道我哪里出错将会很棒。

提前致谢。

＆＃13;

＆＃13;

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

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只使用css过渡

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

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