Cssアニメーション「フルスクリーン」モード

Question

私は画面上にフルスクリーンにしたい要素があります。私はそれが最大化され、それが最小限に抑えられたときと同じようには少しセクシーに見えるように、今私は、私の要素がクリックされたときに素敵なアニメーションを持っていると思います次のCSS

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

を使用することによって、これを行っています。

これはできますか？

私は、これは通常のhtml要素であるとして、それを切り替えるためにはJavaScriptを使用していた場合を除き、私は、要素はCSSを使用してposition:fixedで始めることはできません、私はtransition: top .15s linear;を試してみましたが、それdoesntのは

NOTE を働くように見えますそれで、私はいつもそれを修正したくありません。

ここで私は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; 
} 

ノートページ上の位置を見つけ、position: fixedで開始する必要がないようにするよう位置で固定に設定することができJavaScriptを使用して、それがこの範囲外だと質問。

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/

---

は、クラストグルのためのCSS transitionとjQueryを使ってフェードトランジションを含めるようにコメントにフォローアップ

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>