Question

我有一个报告页面，其中有我的菜单，页眉，页脚等。但是，我想选择一个选项，即可以通过转换将报告内容放大到全窗口大小（而不是全屏）。我正在尝试以下示例：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover

我的主要问题是我不能使它也过渡运动，而不仅仅是扩大运动。它立即跳到左上角，而没有任何过渡，而100％宽度和100％高度过渡有效。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.zoom {
    background-color: green;
    width: 200px;
    height: 200px;
    margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>

<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
  
<div class="zoom"></div>

</body>
</html>

我一直在寻找解决方案，但是大多数结果都是关于全屏显示，而不是全屏显示。

Answer 1

默认情况下，position的{{1}}属性为.zoom，过渡效果无法处理显示类型的更改。

因此，您可能需要为static设置position: absolute;并预设位置。

.zoom

Answer 2

问题是您将位置更改为fixed，并且您的top / left值正在考虑中，因此会立即跳转。另外，我认为没有CSS解决方案通过仅在悬停时指定top / left来实现从静态位置到固定位置的过渡。转换的规则是具有初始值和最终值。

这里的想法是依靠一些JS来设置top / left值的初始值，并使过渡工作正常：

function getPosition(element) {
  var xPosition = 0,
    yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft + element.clientLeft);
    yPosition += (element.offsetTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
    y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
  };
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';

* {
  box-sizing: border-box;
}

.zoom {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0!important;
  left: 0!important;
  position: fixed;
  width: 100%;
  height: 100%;
}

<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>

<div class="zoom"></div>

要更准确，您需要调整窗口滚动和调整窗口大小的值：

function getPosition(element) {
  var xPosition = 0,
    yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft + element.clientLeft);
    yPosition += (element.offsetTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
    y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
  };
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';

window.addEventListener('scroll', function() {
  var pos = getPosition(e);
  e.style.left = pos.x + 'px';
  e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
  var pos = getPosition(e);
  e.style.left = pos.x + 'px';
  e.style.top = pos.y + 'px';
});

* {
  box-sizing: border-box;
}

.zoom {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0!important;
  left: 0!important;
  position: fixed;
  width: 100%;
  height: 100%;
}

<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>

<div class="zoom"></div>

过渡到全窗口（非屏幕）

2 个答案: