html - Css 动画 "fullscreen"模式

Question

我想全屏显示屏幕上的一个元素。我已经通过使用以下 css 完成了此操作


。全屏 {
z-指数:2000；
宽度:100%；
高度:100%；
位置:固定；
顶部:0；
左:0；
填充:15px；
背景色:白色；
}


现在我希望当我的元素被点击时有一个漂亮的动画，所以它在最大化时看起来有点性感，在它最小化时看起来也一样。

这能做到吗？？

我试过 transition: top .15s linear; 但这似乎不起作用

注意我不能使用 css 让元素以 position:fixed 开头，除非我必须使用 javascript 来切换它，因为这是一个普通的 html 元素，所以我并不总是希望它固定。

这是我从中获取全屏 css 的 fiddle ，所以你可以明白我的意思。 http://jsfiddle.net/a7nzy6w6/1/

Answer 1

position 属性无法设置动画。如果您以 position: fixed 开头，那没问题。

fiddle :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);
});

fiddle :http://jsfiddle.net/a7nzy6w6/308/