显示内容的涟漪效应

Question

我尝试创建一个小气泡，点击后，展开以填充整个屏幕并在其中显示一些内容。

这是我对变换的测试：http://codepen.io/FezVrasta/pen/ofDFr
这是宽度和高度的http://codepen.io/FezVrasta/pen/rlDpI

问题在于我在显示泡泡的内在内容时遇到了问题......

我已尝试使用transform: scale(x)并更改宽度和高度，但两种解决方案都存在问题（也就是说，没有正确显示）。

样机：

你有什么建议吗？

编辑：

这是另一种尝试，它几乎是我需要的，但是当你调整页面大小并且在扩展时内部内容的位置有一些平滑过渡时，它会有奇怪的beavhiors。

http://codepen.io/FezVrasta/pen/jqswi

Answer 1

这是一个过渡宽度和高度的人：

它还使用仅css复选框hack进行点击事件。

<强> FIDDLE

标记：

<input type="checkbox" id="cb" />
<label for="cb"></label>

CSS

label {
    width: 40px;
    height: 40px;
    border-radius: 1000px;
    overflow: hidden;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
label:before {
    content:'';
    width: 100%;
    height: 100%;
    background: url(http://lorempixel.com/1800/1800/food) center center no-repeat blue;
    position: absolute;
}
input {
    display:none;
}
input:checked + label {
    width: 100vw;
    height: 100vw;
}

Answer 2

this看起来如何。

基本上我把内部放在外面所以它也不会调整大小，并将其设置为与波纹相同的位置。我一开始display: none;，所以文字没有显示，然后在涟漪click()（当它展开时）我有$(".inner").show();

<div class="ripple">

</div>
<div class="inner">
  <p>Something very cool! It should not reflow during the transition actually.</p>
</div>

修改

<强> New link here

基本上不是改变比例而是改变宽度和高度。

.ripple.expanded {
  border-radius: 0;
  position: fixed;
  left:0;
  top: 0;
  width:100%;
  height: 500px;
  transition: all 2s;
}