Question

我的父div环绕着缩放后的子div。子div从transform:scale(0,0);开始，并在单击按钮时扩展为transform:scale(1,1);。

.content-wrapper {
  display: inline-block;
  background-color: #ddf;
  padding: 10px;
  clear: both;
}

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:transform 1s ease-out; 

}

.content.open {
  transform:scale(1,1);
}

但是，即使子级“关闭”，父级div content-wrapper的大小仍与子级content相同。

所需的行为是当子div关闭时，父div缩小以仅环绕按钮。

JSFiddle of Example

在此示例中，当“ div”关闭时，是否可以将父div包裹在子div周围？

Answer 1

尝试一下：

.content {

    background-color: #fff;
    overflow: hidden;
    transform:scale(0,0);
    transform-origin:top; 
    transition:transform 1s ease-out;

    display: block;
    padding: 0;
    height: 0; width: 0;
}

.content.open {
    padding: 10px;
    height: auto; width: auto;
    transform: scale(1,1);
}

编辑：玩这个：

.content {
    padding: 0;
    background-color: #fff;
    display: block;
    overflow: hidden;
    transform-origin:top;


    transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
    transform: scale(0,0); max-width: 0; max-height: 0;
}

.content.open {
    padding: 10px;

    transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
    transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}

Answer 2

这将是一个挑战，因为背景色已附加到内容容器中。我将从主容器中删除背景色，然后将其设置为absolute

的单独div

<div class="content">
    ...
    <div class="content-bg"> //contains your background color

然后根据您的点击处理程序进行操作。

我已经更新了JSFiddle http://jsfiddle.net/ztxa5kwu/90/

新div的CSS：

.content-bg{
  position: absolute;
  background-color: #ddf;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transition: all .5s ease;
  transform-origin: bottom right;
}

请注意，transform-origin: bottom right;会将背景缩放到您的按钮。在JSFiddle中，我使按钮的边框与背景颜色相同，但是您可以轻松地编辑新<div class="content-bg"></div>的大小以适合按钮周围。

希望能帮助您，并为您提供正确的方向。

Answer 3

我发现了this comment on an older question：

此方法只能部分达到预期效果，但不能达到预期效果实际删除空间。 变形后的盒子就像相对定位的元素-无论如何占用空间已缩放。看看这个jsFiddle，它将带您的第一个只是在底部添加一些伪造的文本。注意下面的文字框高度缩放为零时不会向上移动。 – animuson♦七月 2013年1月29日下午20:37

因此，考虑到这一点，我使用了max-height / max-width hack来获得接近我所追求的东西：http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:all 1s ease-out; 
  max-width: 0;
  max-height: 0;  
}

.content.open {
  transform:scale(1,1);
  max-width: 500px;
  max-height: 500px;
}

如何在缩放后的子DIV周围包裹父DIV

3 个答案: