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;，但似乎无法正常工作

注意我不能使用css开始使用position:fixed元素，除非我必须使用javascript来切换它，因为这是一个普通的html元素，所以我并不总是想要它修复。

这里是我从cbs到全屏的小提琴，所以你可以看到我的意思。 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

您需要使用cin.ignore()

＆＃13;

transition

＆＃13;

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

＆＃13;

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

＆＃13;

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/

Css动画“全屏”模式

3 个答案: