Question

我有一个像素大小的div，并使用top / left + transform技巧在屏幕上居中。我已经创建了一个CSS动画来为这个框设置动画以填充整个屏幕，但由于它基于height / width，因此帧速率非常糟糕。

这是我所取得成就的演示。虽然帧率在小提琴中足够不错，但在我的实际用例中，页面上有许多其他元素，帧速率很糟糕。

https://jsfiddle.net/ozxyfuje/

我想将其转换为使用transform，但我不确定如何处理它，特别是考虑到已经存在的transform。

我尝试使用calc()从div和视口的维度中找出比例因子，但显然vw和vh与calc()不兼容

理想情况下，我想避免使用JavaScript，但我可以接受基于JavaScript的解决方案作为最后的手段。

Answer 1

要避免脚本，您需要一直使用视口单元，然后使用scale()

请注意，要获得更好的性能，请不要使用transition: all 0.5s，指定要转换的属性，例如transition: transform 0.5s;

＆＃13;

$("#hello").click(function(){
	$("body").toggleClass("boom");
});

＆＃13;

body {
	background: #222;
	
	/* full screen app */
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#hello {
	background: #b00;
	
	/* pixel size set in stone */
	width: 40vw;
	height: 40vh;
	
	/* center on screen */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	transition: transform 0.5s;
}

.boom #hello {
	transform: translate(-50%, -50%) scale(2.5);	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

	<div id="hello">
	
	</div>

</body>

＆＃13;

Answer 2

据我所知，只保留固定的宽度和高度（不依赖于容器的宽度/高度），只能使用CSS来实现它。

您可以使用一些JavaScript（在本例中为jQuery）来实现它。我正在添加类'full'以了解元素是否为完整大小，但您可以使用布尔变量来实现它。

JSFiddle

$("#hello").click(function() {

  if ($("#hello").hasClass('full')) {

    $("#hello")
      .removeClass('full')
      .css({
        "transform": "translate(-50%, -50%)"
      });

  } else {

    $("#hello")
      .addClass('full')
      .css({
        "transform": "translate(-50%, -50%) scale(" + $(window).width() / 200 + ", " + $(window).height() / 160 + ")"
      });// 200 & 160 is the div width & height in pixels, set in the CSS

  }
});

body {
  background: #222;
  /* full screen app */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#hello {
  background: #b00;
  /* pixel size set in stone */
  width: 200px;
  height: 160px;
  /* center on screen */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* animation */
  transition: 0.5s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">
</div>

CSS将px大小的div转换为100vw / 100vh

2 个答案: