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>

Answer 2

对于流畅的动画下拉容器，也许你可以试试这个：

    .spoiler > div {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: margin 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: margin 0.2s ease-in-out;
}

我希望他帮助你！我在回答你的问题吗？

CSS和HTML只有下拉列表

2 个答案: