从中心呈现/揭示内容

Question

我正在尝试制作一个圆形div，从div的中心展开以显示内部内容。内部内容不应受到外部div调整大小的影响。

查看jsfiddle：http://jsfiddle.net/tim_m/22bnvLnn/3/ 上面给出的示例的问题是圆圈从左上角扩展而不是从中间向外扩展。内部的内容是好的。使用transform：scale（）会使内容变小，但重点是在动画期间揭示而不是增加内容的大小。编辑-Fabio的jsfiddle引导我找到了最接近我要寻找的东西：http://jsfiddle.net/tim_m/wwonzr0u/2/。唯一的问题是在动画期间内容似乎会稍微膨胀。

以下是我的示例代码：

<div class="circle">
    <div class="content">Content</div>
</div>

CSS：

body {
    padding: 20px;
}

.button {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    text-align: center;
}
.circle,.content {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.circle {    
    background: rgba( 99, 99, 99, 0.8 );
    border-radius: 100%;
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    line-height: 400px;
    position: absolute;
    left: 20%;
    top: 20%;
}

.circle.show {
    width: 400px;
    height: 400px;    
    vertical-align: middle;
}

.content {
    width: 400px;
    height: 400px;
    position: absolute;
}

- Tim McClure

Answer 1

我认为这可以满足您的需求：

我认为这可以满足您的要求：

.circle {
    ...
    margin-top: 150px;
    margin-left: 150px; 
}

.circle.show {
    width: 400px;
    height: 400px;    
    margin: 0;
}

.content {
    line-height: 100px;    
    position: absolute; 
    width: 100px;
}

.show .content {
    line-height: 400px;
    width: 400px;
}

为了保持圆形在同一位置，我添加了一个随着圆形增长而减少的边距。.content的行高和宽度使文本在元素增长时保持居中。 更新的JSFiddle

- Tom Fenech

---

抱歉，可能应该更清楚一些 - 内容应该保持在中心，圆圈在其周围扩展。在您的fiddle中，它看起来在动画期间向左和向上移动。 - Tim McClure

我已经更新了答案和JSFiddle。这样做是否符合您的要求？ - Tom Fenech

关闭...将圆和单词“content”视为完全静止。圆的中心固定不动，单词在页面上也不会移动。圆仅扩展，保持其起点不变。但是您的jsfiddle中内容仍在移动。 :( - Tim McClure

尝试一下我的最新更新，我认为它可以满足你的需求。 - Tom Fenech

Answer 2

这道题让我想了好久，但是试着把你的CSS改成这样：

body {
    padding: 20px;
}
.button {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    text-align: center;
}
.circle, .content {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.circle {
    background: rgba(99, 99, 99, 0.8);
    border-radius: 100%;
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    line-height: 10px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    position: relative;
    left: 200px;
    top: 200px;
}
.circle.show {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -o-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    z-index:0;
}
.content {
    position: relative;
    transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    top:50%;
    color:#fff;
    z-index:1;
}
.show .content {
    transform: scale(1);
}

在这里查看 Fiddle

- Devin

---

这在圆的缩放方面是正确的，但内容不应该改变大小。将其视为一个剪辑蒙版，随着动画的扩展，内容保持静止且大小始终相同。这有意义吗？ - Tim McClure

我认为问题出在你将scale(1)添加到了内容中，而应该是scale(0.33)，这样可以保持内容与动画开始时大小相同，但似乎会膨胀然后缩小。请查看上面更新的代码片段，这是最接近我想要的效果。 - Tim McClure

啊，你可以将最后一行改为 transform: scale(0.3);（虽然 transform: scale(0.35); 更好，但理论上应该是 0.3，所以自己测试一下）。然而，由于过渡会在每个框架计算比例和位置，因此会有一些运动。 - Devin

没错，就是这样。这个解决方案唯一的问题就是那微小的移动。 - Tim McClure