Div扩展到全屏平滑点击

Question

我想让div在单击时顺利地扩展到全屏。我打算使用的最终产品与用户点击本网站上的案例研究相似https://infinum.co/

到目前为止，我的代码可以使div全屏，但由于我添加的位置已修改，所以它跳转。我并不担心实际的动画是由CSS还是JavaScript/jQuery处理。

$(function() { 
 
    $(".block").on("click", function() { 
 
    $(this).addClass("fullscreen"); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
.block { 
 
    width: 50%; 
 
    margin: 0 auto 50px auto; 
 
    height: 300px; 
 
    background-color: red; 
 
    transition: all 0.5s linear; 
 
} 
 
.block.fullscreen { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="block"></div> 
 
<div class="block"></div>

所有到目前为止我可以在此笔发现：http://codepen.io/anon/pen/RKGeYj

Answer 1

让你#block全屏，然后再延迟比全屏动画速度大于后应用position:absolute;。

这是一个工作片段。

var isFullscreen = false; 
 
$("#block").click(function(){ 
 
    var prop = {}; 
 
    var speed = 910; 
 
    if(!isFullscreen){ // MAXIMIZATION 
 
     prop.width = "100%"; 
 
     prop.height = "100vh"; 
 
     isFullscreen = true; 
 
     $("#block").animate(prop,speed); 
 
     setTimeout(function() { 
 
     $("#block").css("position","absolute"); 
 
     }, 920); 
 
    } 
 
    else{   
 
     prop.width = "50%"; 
 
     prop.height = "250px";    
 
     isFullscreen = false; 
 
     $("#block").animate(prop,speed); 
 
     setTimeout(function() { 
 
     $("#block").css("position","relative"); 
 
     }, 920); 
 
    } 
 
    
 
});

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#block,#blockTwo{ 
 
    width:50%; 
 
    height:250px; 
 
    margin:0 auto; 
 
    background-color: red; 
 
} 
 
#block{ 
 
    z-index:100; 
 
} 
 
#blockTwo{ 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="block"></div> 
 
<div id="blockTwo"></div>

Answer 2

结帐http://usefulangle.com/post/38/animating-lightbox-with-css-javascript。它包含您正在寻找的动画。

当你正在做的位置固定的，你应该给初始顶部 & 留下性能以及。你可以得到最初的top & left属性使用getBoundingClientRect方法。 随着动画顶部 & 离开，你应该动画宽度 & 高度以及一个平滑的外观。

.in-animation { 
    animation: inlightbox 0.8s forwards; 
    position: fixed !important; 
} 

@keyframes inlightbox 
{ 
    50% { 
     width: 100%; 
     left: 0; 
     height: 200px; 
    } 
    100% { 
     height: 100%; 
     width: 100%; 
     top: 0; 
     left: 0; 
    } 
}