Css動畫「全屏」模式

Question

我有一個屏幕上的元素，我想要全屏。我已經做到了這一點，通過下面的CSS

.fullscreen { z-index: 2000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; padding: 15px; background-color: white; }

現在我想有一個漂亮的動畫被點擊我的元素時，所以看起來有點性感，因爲它最大化，當它最大限度地減少相同。

可以這樣做嗎？

我已經試過transition: top .15s linear;但似乎沒有工作

注意 我不能有元素開始使用position:fixed CSS，除非我不得不使用JavaScript來觸發它，因爲這是一個正常的HTML元素，所以我並不總是希望它修復。

這裏是我得到了從全屏幕的CSS的小提琴，所以你可以看到我的意思。 http://jsfiddle.net/a7nzy6w6/1/

Answer 1

position屬性不能動畫。如果你從position: fixed開始，這沒有問題。

小提琴：http://jsfiddle.net/a7nzy6w6/299/

#myDiv.fullscreen { 
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

#myDiv { 
    position: fixed; 
    width: 500px; 
    height: 400px; 
    top: 20px; 
    left: 20px; 
    transition: all .15s linear; 
    background: #cc0000; 
} 

需要注意的是使用JavaScript，你會發現頁面上的位置，並將其設置爲固定在向沒有下手position: fixed的位置，但是這是此範圍之外題。

---

跟進評論，包括與CSS transition和jQuery類切換淡入淡出過渡：

CSS：

#myDiv.fullscreen { 
    z-index: 9999; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#myDiv.fade { 
    opacity: 0; 
} 
#myDiv { 
    width: 500px; 
    height: 400px; 
    top: 20px; 
    left: 20px; 
    background: #cc0000; 
    transition: opacity .15s linear; 
} 

JS：

$('button').click(function(e) { 
    var $div = $('#myDiv'); 
    $div.toggleClass('fade'); 
    setTimeout(function(){ 
    $div.toggleClass('fade fullscreen'); 
    }, 150); 
}); 

小提琴：http://jsfiddle.net/a7nzy6w6/308/

Answer 2

試試這個

<div class="row"> 
     <div class="col-lg-12"> 
      <div id="myDiv"> 
       my div 
       <button>Full Screen</button> 
      </div> 
     </div> 
</div> 

#myDiv.fullscreen{ 
    z-index: 9999; 
    min-width: 100%; 
    min-height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

#myDiv{ 
    background:#cc0000; 
    min-width:500px; 
    max-width: 500px; 
    min-height:400px; 
    transition: all 500ms; 
    } 

現場演示 - http://jsfiddle.net/a7nzy6w6/306/

Answer 3

您需要使用transition

$('button').click(function(e){ 
 
    $('#myDiv').toggleClass('fullscreen'); 
 
});

#myDiv{ 
 
    background:#c99; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    width:500px; 
 
    height:400px; 
 
    transition: all 1s ease; 
 
} 
 

 
#myDiv.fullscreen{ 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 1s ease; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
     <div class="col-lg-12"> 
 
      <div id="myDiv"> 
 
       my div 
 
       <button>Full Screen</button> 
 
      </div> 
 
     </div> 
 
</div>