Question

是否可以在容器（overflow:hidden）上创建this kind接口但没有.bar。

我无法使用overflow:hidden，因为在.row-1和.row-2中我有一些明显比.row更大的下拉元素。因此，如果我使用overflow:hidden，这些下拉列表将会被截断。

但如果我删除overflow:hidden，则.row-2最初会显示错误。

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

无论如何，对此的解决方案不必使用那些translateY方法。它可能是别的东西，但希望没有JS。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

第一行折叠在上边距上方。（参见变换原点）

第二行，最初在底部边缘处折叠，并从那里扩展到完整高度。

是否可以显示没有溢出隐藏的元素？

1 个答案: