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

联署材料：

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

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

Answer 2

您需要使用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>

​

Answer 3

尝尝这个

<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/