javascript - 将 div 扩展到完整页面大小，内容已经到位

Question

我试图在左上角有一个可点击的圆圈，点击后会扩展到整页。我用秤让它工作

.hover.opened {
    transform: scale(1);
    transition: all 0.5s ease-out;
    overflow: hidden;
}

http://jsfiddle.net/g571o6ou/

现在我希望红色圆圈的内容已经到位(即不缩放，因为它看起来很糟糕)但不可见，并且红色圆圈会扩展以显示其内容。 (插图:http://i.imgur.com/tmq32uS.png 如您所见，内容未按比例放大，它已经处于正确的比例但仅在红色圆圈增大的地方可见)

你会怎么做？这可能吗？提前致谢。

Answer 1

我使用的方法与您的有所不同。

HTML:

<div class="top-circle">
    <div class="inner-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS:

html, body{
    background:#555;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
.top-circle{
    top:0;
    left:0
    position:absolute;
    width:50px;
    height:50px;
    background:red;
    overflow:hidden;
    border-radius: 0 0 5000px 0;
    transition:all 0.7s ease-out;
}
.inner-text{
    margin: 50px;
    width:500px;
}

jQuery:

$(function(){

    $('.top-circle').click(function(){
        $(this).width($(window).width()+500);
        $(this).height($(window).height()+500);
    });
});

这是 jsFiddle .