是否有可能在不隐藏溢出的情况下显示元素？

Question

是否可以创建接口的this kind，但容器上没有overflow:hidden (.bar)。

我不能使用overflow:hidden，因为在.row-1和.row-2中，我有一些明显比.row大的dropdown元素。因此，如果我使用overflow:hidden，这些下拉列表就会被切断。

但是，如果我删除overflow:hidden，那么.row-2最初将是可见的，这是错误的。

我可以在我的.bar下面有另一个元素，一些特定的background-color和z-index高于.row，但低于我提到的下拉列表，但这不是真正的解决方案，实际上是不可能的，因为在.bar下面我有一些其他的元素。

无论如何，这个问题的解决方案不一定要使用这些translateY方法。它可以是其他东西，但希望没有JS。

​

.bar {
  background: #7187A2;
  color: #35495F;
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.row {
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
}
#switch:checked ~ .bar .row-1,
#switch:checked ~ .bar .row-2 {
  -webkit-transform: translateY(-80px);
  -moz-transform: translateY(-80px);
}
body {
  padding-top: 150px;
}

<input type="checkbox" id="switch">
<label for="switch">Click here</label>

<div class="bar">
  <div class="row row-1">This is row number 1</div>
  <div class="row row-2">And that's 2nd row</div>
</div>

​

Answer 1

您可以更改滑动效果，而改用缩放效果。它不是相同的，但却非常接近：

.row-1 {
    -webkit-transform-origin: top center;
    transform-origin: top center;
}
.row-2 {
    margin-top: -80px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
}

#switch:checked ~ .bar .row-1
 {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

#switch:checked ~ .bar .row-2
 {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

fiddle

第一行在上边距上方折叠。(请参见变换原点)

第二行，最初在底部边缘折叠，然后从那里扩展到整个高度。