html - 仅 CSS 和 HTML 下拉菜单剧透

Question

我正在尝试创建带有打开动画的 CSS 和 HTML 下拉式剧透。

我从这里开始 jsfiddle 但是 margin-top:-100%; 效果不是很好。

margin-top:-100%;

平滑动画下拉容器的任何解决方案？

Answer 1

您的 CSS 有一些错误。您为显示状态指定了.spoiler > div，为隐藏状态指定了.spoiler。您应该为两者指定相同的内容，动画将顺利运行。

.spoilerbutton {
    display:block;
    margin: 5px 0;
}
.spoiler {
    overflow:hidden;
    background: #f5f5f5;
}
.spoiler > div {
    -webkit-transition: all 0.2s ease;
    -moz-transition: margin 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
    margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
    padding:5px;
}

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
</div></div>

顺便说一下，您还可以像这样为 max-height 而不是 margin 设置动画:

.spoilerbutton {
  display: block;
  margin: 5px 0;
}

.spoiler {
  overflow: hidden;
  background: #f5f5f5;
}

.spoiler>div {
  margin: 5px;
  overflow: hidden;
  transition: all 1s ease;
}

.spoilerbutton[value="Show"]+.spoiler>div {
  max-height: 0;
}

.spoilerbutton[value="Hide"]+.spoiler>div {
  max-height: 90px; /*use a big value here*/
}

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler">
  <div>
    PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE
  </div>
</div>