是否有可能显示没有溢出隐藏的元素?

Question

是否可以在容器(.bar)上创建没有overflow:hidden的这种接口?

我不能使用overflow:hidden，因为在.row-1和.row-2我有一些下拉元素明显大于。row。所以如果我使用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);
}

小提琴

第一行在上边距上方折叠。(参见transform origin)

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