Div擴展到全屏平滑點擊

我想讓div在單擊時順利地擴展到全屏。我打算使用的最終產品與用戶點擊本網站上的案例研究相似https://infinum.co/Div擴展到全屏平滑點擊

到目前爲止，我的代碼可以使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

來源

2017-01-16 James Walker

你碰到的問題是，你不能'transition'一個'position'財產這就是爲什麼你獲得的是跳躍的樣子。我的建議是使用'transform'而不是'position'。 –

@James Walker答案對你有幫助。或者確實告訴你是否有任何問題。 – ab29007

讓你#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>

來源

2017-01-16 14:54:59 ab29007

結帳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; 
    } 
}

來源

2017-02-13 08:53:10

Div擴展到全屏平滑點擊

回答

相關問題